Главная Верстка (html/css) Перенос текста внутри тега pre
Перенос текста внутри тега pre
E-mail Печать PDF

Не так давно столкнулся с проблемой, что введенный мною код через Geshi красиво отображается, но некрасиво растягивает страницу.

К примеру, такой кусок кода

1
 
бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла

отображался просто в одну строку.

Решение данной проблемы оказалось довольно простое. Дело в том, что тег pre по умолчанию  не допускает принудительного переноса строк. И все что нам нужно это вставить в css кусок кода, который сообщит браузером, что нужно принудительно делать перенос.

1
2
3
4
5
6
7
8
9
 
pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 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 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

И вуаля, строки волшебным образом переносятся. Благодарить  можно здесь или здесь ↓

Комментарии

 
0 #1 mishal 2012-04-06 07:41 А такое уже не переносится на строку
"*.jpg;*.gif;*.bmp;*.png;*.jpeg;*.doc;*.docx;*.txt;*.rtf;*.zip;*.rar;*.pdf;*.xls;*.xlsx"
видимо, придирчив к символам для разрыва Цитировать
 

Авторизация

Nice Ajax Poll

Какое из моих расширений самое лучшее?

Статистика


Реклама
© 2009 ageent.ru.