CSS: Перенос слов в теге PRE
Для отображения кода на страницах сайта наиболее часто используется известный контейнер PRE. Однако при использовании его «как есть», выводимый в нем текст не переносится по словам и «рушит» верстку страницы. Поможет CSS-свойство white-space...
Для отображения кода на страницах сайта наиболее часто используется известный контейнер PRE. Однако при использовании его «как есть», выводимый в нем текст не переносится по словам и «рушит» верстку страницы. Перенос приходится делать при помощи клавиши ввода, что совершенно неудобно, поскольку приходится переходить в режим предварительного просмотра публикуемой веб-страницы для поиска места переноса.
В данной ситуации на помощь к нам приходит малоизвестное CSS-свойство white-space, которое применяется к блочным элементам и служит для установки способа отображения пробелов между словами. Свойство может использоваться с аргументами normal, pre, nowrap, pre-wrap, pre-line и inherit. Не останавливаясь на значениях аргументов (они понятны благодаря своим названиям), назначим класс code элементу PRE и укажем для него свойство white-space:
.code { white-space:pre-wrap; }
Задача решена: длинные строки в блоках кода, заключенного в контейнер PRE, теперь будут переноситься по словам.
В своих проектах Мы используем следующие css-свойства:
pre { display: block; padding: 0px; margin: 0px; font-size: 12px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; }