Перенос слов в html теге PRE

Текст, заключенный в теги <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, расположенном в папке с вашей темой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *