white-space

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Част.	Част.	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Част. — поддерживается частично.

Краткая информация

CSS (ЦСС)	CSS (ЦСС)1
Значение по умолчанию	normal
Наследуется	Да
Применяется	К блочным элементам
Аналог ШТМЛ	<PRE>, <NOBR>

Описание

Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде ШТМЛ показывается на web-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер контент выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

white-space: normal | nowrap | pre

Аргументы

normal: контент в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap: Переносы строк в коде ШТМЛ игнорируются, весь контент отображается одной строкой, вместе с тем, добавление тега <BR> переносит контент на новую строку.
pre: контент показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде ШТМЛ. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоска прокрутки.

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <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;ШТМЛ&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;/ШТМЛ&gt;
  </p>
  
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра white-space

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

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

Примечание

Браузер Internet Эксплорер 6 и младше не поддерживает аргумент pre. Internet Эксплорер 7 понимает значение pre только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">).

Браузер Опера 9 и Файер фох 3 также работают со значением pre-wrap, при котором сохраняются все пробелы и переносы. Однако если контент по ширине не помещается в заданную область, то контент автоматически будет перенесен на следующую строку.