Текст, заключенный в теги <pre>…</pre> по умолчанию сохраняет свое форматирование. Это очень удобно при копировании материала из уже созданного текстового документа. Но, если текст по ширине длиннее, чем блок, в котором он расположен, то слова в теге pre при переносе будут обрезаться. Либо, если активно свойство overflow:scroll, то будет добавлена горизонтальная полоса прокрутки. Оба варианта вывода материала очень некрасиво выглядят.
Для того чтобы сделать правильный перенос слов в html теге pre, следует подключить CSS стили:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* 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+ */
width: 99%;
}
Если вы используете WordPress, то прописывать их следует в файле style.css, расположенном в папке с вашей темой.