Переносы в теге pre

Вы наверное не раз замечали, что при использовании тега PRE или CODE для отображения какого-то куска кода получается весьма некрасивая картина. А именно: строки отображаюся без переносов, растягивая и портя дизайн сайта. До того как я написал прошлую заметку я особо не заморачивался данной проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы:

pre {
white-space:pre-wrap; /* css-3 */
white-space:-moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
pre {
//white-space: pre;			/* CSS2 */
white-space:pre-wrap;		/* CSS 2.1 */
//white-space: pre-line;		/* CSS 2.1/3 *//
white-space:-moz-pre-wrap;	/* Mozilla */
//white-space: -hp-pre-wrap;	/* HP printers *//
white-space:-o-pre-wrap;	/* Opera 7 */
white-space:-pre-wrap;		/* Opera 4-6 */
word-wrap:break-word;		/* IE 5.5+ */
}

Собственно, первый атрибут удаляем, т.к. он бесполезен. Третий — потому как pre-line — это тот же pre-wrap, но сжимающий последовательности символов пустого пространства (что нам не надо). А пятый — из-за отсутствия смысла. Комментарии (они не «условные») также можно удалить, т.к. они загромождают место.

А если взять за предположение, что пользователи Оперы и Фаерфокса все-таки знают, что такое обновление, достаточно и двух строчек:

white-space: pre-wrap;
word-wrap: break-word;

Соответственно, такое решение позволяет встраивать многострочный код, который, наконец, будет подстраиваться по ширине блока. Без всяких дополнительных тегов, но за счет места в CSS.