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

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.