Головна Верстка (html / css) Перенесення тексту всередині тега pre
Перенесення тексту всередині тега pre

Не так давно зіткнувся з проблемою, що введений мною код через 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

Цитувати
 

Nice Ajax Poll

Яке з моїх розширень найкраще?

Статистика

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