Свойство white-space

       
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част Част Да Част Част Част Част Да Да Да Да Част Част Да

Част. - Частично

CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется К блочным элементам
Аналог HTML <PRE>, <NOBR>

Описание свойства white-space

Обычно, в HTML, все пробелы воспринимаются браузером как один пробел. Свойство white-space может поменять этот вариант и указать браузеру как использовать пробелы. Свойство white-space очень похоже на тег <PRE>, только текст не меняет на моноширинный.

Запись в CSS

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Применяемые значения

normal - Текст выводится как обычно, переносы строк устанавливаются автоматически.

nowrap - Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой. Вместе с тем, добавление тега <BR> переносит текст на новую строку.

pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

pre-line - В тексте пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.

pre-wrap - В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

inherit - Как у родителя.

Пример - использование свойства white-space

<html>
 <head>
  <title>Свойство white-space</title>
  <style type="text/css">
   P.example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /*Семейство шрифта */
    padding: 7px; /* Поля вокруг текста */
    margin: 0px 0px 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */ 
   } 
   P.exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0px; /* Убираем отступы */
    white-space: nowrap; /* Переносов в тексте нет */
   }
  </style>
 </head>
 <body> 
  
  <p class="exampleTitle">Пример</p>
  <p class="example">
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   lt;/body&gt;
   &lt;/html&gt;
  </p>
  
 </body>
</html>

Объектная модель

[window.]document.getElementById("elementID").style.whiteSpace

Браузеры

Браузер Internet Explorer до седьмой версии включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <TEXTAREA> значения normal, nowrap, и pre воспринимаются как pre-wrap.

Opera до версии 9.2 не поддерживает значение pre-line. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Список свойств