by Vyacheslav Bondaruk

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;».

Постоянная ссылка   Трекбек   Данные о записи