css-white-space

  • 08.07.2026
  • admin
  • 2минут читать

<white-space>

CSS CSS1
Значение по умолчанию normal
Наследуется Да
Применяется К блочным элементам
Аналог HTML <PRE>, <NOBR>
Ссылка на спецификацию https://www.w3.org/TR/CSS21/text.php#propdef-white-space

Описание

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

Синтаксис

white-space: normal | nowrap | pre

Аргументы

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

Пример

Валидный CSS
Валидный HTML

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

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

Текст

  • letter-spacing определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут.
  • line-height устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
  • text-align определяет горизонтальное выравнивание текста в пределах элемента.
  • text-decoration добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
  • text-indent устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.
  • text-transform управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.
  • vertical-align выравнивает элемент по вертикали относительно своего родителя или окружающего текста.
  • white-space устанавливает, как отображать пробелы между словами.
  • word-spacing устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно.