CSS настройка HTML тега pre

По-умолчанию текст в тегах отображается с форматированием «как есть». Т.е. если строка длинная, то она будет заезжать за все возможные границы и портить всю вёрстку. По оси X страница будет скролиться именно из-за какой-нибудь одной длинной строки. Как этого избежать, но при этом оставить великолепный функционал тега ? Раньше я для всех тегов просто прописывал свойство «overflow» со значением «auto»:

pre {overflow: auto;}

Однако позже эти вечные горизонтальные скролбары в областях (блоках) тегов pre стали также раздражать, но я не знал как сделать лучше. Так, чтобы и форматирование осталось, и чтобы длинные строки текста переносились, не создавая проблем со скролингом. Оказалось, что такого эффекта хотел не только я один и люди из комитета развития и стандартизации CSS (конкретно из W3C) давно над этим позаботились. Представляю вам замечательное CSS свойство «white-space» со значением «pre-wrap»:

pre {white-space: pre-wrap;}

Это сделает блок pre максимально эффективным. Останутся все его замечательные свойства (вёрстка как есть) и также будут и автоматические переносы слов на строках, которые не умещаются в область блока. Это поистине бесподобно! Просто самое изящное решение. Лучше и не придумаешь. Ещё раз восхищаюсь тем какие же замечательные люди работают в W3C.

Поделиться!
Tags: , , , , , , , ,

6.94MB | MySQL:55 | 0,066sec