CSS: Перенос слов в теге PRE

Для отображения кода на страницах сайта наиболее часто используется известный контейнер 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;
}