27 апреля 2009 :Перенос строк в теге <pre>

Часто бывает необходимо вставить в статью (новость, запись в блоге) какой-то программный код, вроде

<?
 some program or html code
?>

Для того чтобы не мучаться с форматированием этого кода и т.п. для него удобно использовать тег <pre> - это негативно сказывается на семантике вёрстки конечно, т.к. есть тег <code>, но он изначально не сделан блоковым (block) элементом, это досадное упущение. Конечно стилями из него можно скопировать поведение тега <pre>, но почему бы не воcпользоваться тем что уже есть.

К сожалению, плохо выглядит, когда у нас в коде очень длинная строка, она может повредить нам всю вёрстку растянув тег <pre> на всю длину строки. Чтобы от этого избавиться необходимо добавить немного стилей:

pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, с 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ поддерживается в IE, Safari, и Firefox 3.1.*/
}

Если вы установите ширину width: 100%, то получите горизонтальную прокрутку в IE7 - используйте width:99%.

Также можете добавить тегу pre границу, цвет фона и отступы margin (внешний) и padding (внутренний). Не забудьте поправить их и для стилей печатной версии. У меня это выглядит так:

pre {width:90%;border:#a0a0c0 1px solid;background:#e8faff;color:black;margin:10px 0 10px 30px;padding:10px;
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     word-wrap: break-word;
}

Стиль для переноса форматирования строк как в pre методом CSS:

Если хочется сделать свойства элемента pre для другого элемента (например для злосчастного <code>) вы должны использовать css свойство

.preElement { white-space:pre;}

Оно не работает в IE 5 и требует strict доктайпа в IE 6. Борцы за семантику могут использовать конструкцию <pre><code></code></pre>

Ссылки:

 word-wrap css3
wrapping-text-inside-pre-tags
The White-space Property In CSS