Свойство 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.

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