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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
white-space
break-spaces
normal
nowrap
pre
pre-line
pre-wrap
Accepts shorthand values
Experimental
On SVG elements
Support on <textarea>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.