Перенос слов в контейнере PRE

Довольно часто веб-мастера сталкиваются с задачей корректного и удобного способа вывода кода на веб-странице. Наиболее часто для этих целей используется известный контейнер PRE. Однако при использовании его «как есть», выводимый в нем текст не переносится по словам и «рушит» верстку страницы. Перенос приходится делать при помощи клавиши ввода, что совершенно неудобно, поскольку приходится переходить в режим предварительного просмотра публикуемой веб-страницы для поиска места переноса.

В данной ситуации на помощь к нам приходит малоизвестное CSS-свойство white-space, которое применяется к блочным элементам и служит для установки способа отображения пробелов между словами. Свойство может использоваться с аргументами normal, pre, nowrap, pre-wrap, pre-line и inherit. Не останавливаясь на значениях аргументов (они понятны благодаря своим названиям), назначим класс code элементу PRE и укажем для него свойство white-space:

.code { white-space:pre-wrap; }

Задача решена: длинные строки в блоках кода, заключенного в контейнер PRE, теперь будут переноситься по словам.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.