white-space

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

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

CSS	CSS1+
Значение по умолчанию	normal
Наследуется	Да
Применяется	К блочным элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

Аргументы

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

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

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

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

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

inherit - Наследует значение родителя.

Пример

<!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=windows-1251">

      <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 до версии 7.0 включительно не поддерживает значения 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.23 включительно не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

white-space

Категории

Последние комментарии

	Русский
	English