Тег pre и перенос строк

Автор: | 08/08/2013
Нет комментариев
 

css_logoПри оформлении текста в тег <pre>...</pre> — длинная строка не переносится на следующую при достижении границы объекта (например — границы контейнера <div>), а выходит за его рамки.

Для устранения проблемы — в файл style.css (или другой файл стиля, который используется в данном блоке) добавляем:

pre {
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, с 1999 года*/
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Например — теперь файл styles/shCoreDefault.css выглядит так:

.syntaxhighlighter,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody{
white-space:pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
margin:0 !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:none !important;
text-align:left !important;
float:none !important;
vertical-align:baseline !important;
position:static !important;
left:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
height:auto !important;
width:auto !important;
line-height:1.1em !important;
font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
font-weight:normal !important;
font-style:normal !important;
font-size:1em !important;
min-height:inherit !important;
min-height:auto !important;
}