Перенос строки внутри тега PRE

В html существует полезный тег Pre, который позволяет отображать содержимое в форматированном виде, с моноширинным шрифтом и сохраняя все пробелы. Но есть одна проблема если текст в одной строке длинный то он будет отображаться без переносов, и в следствии посетители будут пропускать данные статьи т.к. они будут нечитабельные.

Данную проблему можно устранить добавив стили к тегу:

Для CSS3:

  white-space: pre-wrap;

Для Mozilla <2:

  white-space: -moz-pre-wrap;

Для Opera 4-6:

  white-space: -pre-wrap;

Для Opera 7-9.5:

  white-space: -o-pre-wrap;

Для Internet Explorer 5.5-8:

  word-wrap: break-word;

 

Примеры:

<style type="text/css">
  pre{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
  }
</style>
<pre>
  Очень длинный код.
</pre>

Или просто добавив в свой файл со стилем:

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

Считаю можно отказаться от поддержки для firefox, opera, т.к. данные браузеры уже мало кто использует. А для IE 7 я бы оставил на 2012г.

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}


comments powered by Disqus

Популярное