CSS. Overflow, Word-wrap, Scrolling

Столкнулся с тем, что в highlight.js текст не переноситься, а скролиться в блоке PRE. Я предпочитаю, чтобы текст переносился автоматом. Для этого существуют специальные css-свойства. Ниже привожу универсальный метод для всех броузеров и версий css, которым собственно и пользуюсь сам:


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 */
}

Для скролинга же блока используется “overflow: auto”, чтобы отключить скроллинг и обрезать линию “overflow: hidden”, а чтобы без скроллинга и полной линией текста “overflow: off;”.

Хочешь заработать? Зарабатывай с помощью TNX.net или Sape!

Дата публикования: December 7th, 2006.

Категория(и): Wordpress, Кодинг, Разработка, Софт, Статьи.

Таги: CSS, CSS, HTML, xHtml, Hacks, HTML, Overflow, Scrolling, Word-wrap, Wordpress, xHTML, Кодинг, Мануалы, Перенос_Строки, Разработка, Софт, Статьи.

Trackback URL: http://www.slaff.net/2006/12/07/css-overflow-word-wrap-scrolling.html/trackback

Иван Сагалаев (Dec 8th, 2006 @ 7:31 am)

Я только встряну сказать, что это не highlight.js слова не переносит, а просто это поведение по умолчанию блока pre, который для кода используют стандартно.

P.S. Кстати, в статье не расцвечен блок, потому что там внутри уже есть теги (acronym). В этом случае highlight.js не трогает раскладку. Надо бы это в FAQ вынести…
slaff (Dec 8th, 2006 @ 10:02 pm)

Про акронимы уже написал автору. В принципе там не сложный плагин, если автор не ответит, то сам поковыряю попозже :) А сейчас пора концертов, фотосессий - еле успеваю всё делать :)

Маниакальный Веблог » Код с тегами в highlight.js