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

Корректный и валидный способ добиться переноса слов в HTML-теге PRE

Перенос слов и элемент 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

3 комментария к посту «Перенос слов в контейнере PRE»
  • Аватар

    3. Admin @ 19 янв 2010 г. в 03:21

    Нисколько. Valid CSS 2.1 и CSS 3 гарантированы :)

  • Аватар

    2. a36yka @ 18 янв 2010 г. в 10:08

    Это свойство на валидность не повлияет?

  • Аватар

    1. Lash @ 18 янв 2010 г. в 05:13

    Спасибо, ответ полный и в тему!

Новый комментарий

Для редактирования комментария осталось 10 минут