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

По-умолчанию текст в тегах pre отображается с форматированием “как есть”. Т.е. если строка длинная, то она будет заезжать за все возможные границы и портить всю вёрстку. По оси X страница будет скролиться именно из-за какой-нибудь одной длинной строки. Как этого избежать, но при этом оставить великолепный функционал тега pre?

Раньше я для всех тегов pre просто прописывал CSS свойство “overflow” со значением “auto”:

pre {overflow: auto;}

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

pre {white-space: pre-wrap;}

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

Поделиться!



coded by nessus

13.6MB | MySQL:63 | 0.101sec