white-space

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

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

Сводка

/* Ключевые значения */
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 Сохраняются как в источнике Сохраняются как в источнике Переносится Переносятся

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

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

Примеры

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

code { 
  white-space: pre; 
}

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

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

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

Спецификация Статус Комментарий
CSS Text Module Level 3
Определение 'white-space' в этой спецификации.
Рабочий черновик Уточняется алгоритм переноса строк.
CSS Level 2 (Revision 1)
Определение 'white-space' в этой спецификации.
Рекомендация Первоначальное определение

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
white-spaceChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5.5Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
break-spacesChrome Полная поддержка 76Edge Полная поддержка 79Firefox Полная поддержка 69IE Нет поддержки НетOpera Полная поддержка 62Safari Полная поддержка 13.1WebView Android Полная поддержка 76Chrome Android Полная поддержка 76Firefox Android Нет поддержки НетOpera Android Полная поддержка 54Safari iOS Полная поддержка 13.4Samsung Internet Android Полная поддержка 12.0
nowrapChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5.5Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
preChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 6Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
pre-lineChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 8Opera Полная поддержка 9.5Safari Полная поддержка 3WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
pre-wrapChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3
Полная поддержка 3
Нет поддержки 1 — 3.6
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 8
Замечания
Полная поддержка 8
Замечания
Замечания From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Support in SVGChrome Нет поддержки НетEdge Нет поддержки 12 — 79Firefox Полная поддержка 36IE Полная поддержка 10Opera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 36Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Support on <textarea>Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 36IE Полная поддержка 5.5Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 36Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.