white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Свойство white-space управляет тем, как обрабатываются пробельные символы внутри элемента.

Интерактивный пример

Примечание: Для управления переносами внутри слов используйте overflow-wrap, word-break или hyphens.

Сводка

css
/* Ключевые слова */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Глобальные значения */
white-space: inherit;
white-space: initial;
white-space: unset;
Начальное значениеnormal
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

Синтаксис

Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

Значения

normal

Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.

nowrap

Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.

pre

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>.

pre-wrap

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>, и при необходимости для заполнения строчных боксов.

pre-line

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам <br>, и при необходимости для заполнения строчных боксов..

break-spaces

Поведение идентично pre-wrap со следующими отличиями:

  • Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
  • Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
  • Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства white-space:

Новые строки Пробелы и табуляция Перенос текста по словам Пробелы в конце строки
normal Объединяются в одну Объединяются в один пробел Переносится Удаляются
nowrap Объединяются в одну Объединяются в один пробел Не переносится Удаляются
pre Сохраняются как в источнике Сохраняются как в источнике Не переносится Сохраняются как в источнике
pre-wrap Сохраняются как в источнике Сохраняются как в источнике Переносится Висят
pre-line Сохраняются как в источнике Объединяются в один пробел Переносится Удаляются
break-spaces Сохраняются как в источнике Сохраняются как в источнике Переносится Переносятся

Формальный синтаксис

white-space = 
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

Примеры

Основной пример

css
code {
  white-space: pre;
}

Перенос строк внутри элементов <pre>

css
pre {
  word-wrap: break-word; /* IE 5.5-7 */
  white-space: pre-wrap; /* текущие браузеры */
}

Спецификации

Specification
CSS Text Module Level 4
# white-space-property
Scalable Vector Graphics (SVG) 2
# TextWhiteSpace

Совместимость с браузерами

BCD tables only load in the browser