CSS свойство `white-space`

Определение и применение

Свойство white-space управляет обработкой пробелов, переводов строк и автоматическим переносом текста. Это сокращённая запись для white-space-collapse и text-wrap-mode.

Попробуйте значения white-space

В HTML есть повторные пробелы и перевод строки. Сравните их сохранение и автоматический перенос; длинную строку можно прокрутить.

white-space: normal

HTML и CSS примера

HTML

<div class="demo-target">
  Первая строка Вторая строка с достаточно длинным текстом для переноса
</div>

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  overflow: auto;
  white-space: normal;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  overflow: auto;
  white-space: nowrap;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  overflow: auto;
  white-space: pre;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  overflow: auto;
  white-space: pre-wrap;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  overflow: auto;
  white-space: pre-line;
}

Поддержка браузерами

Спецификации: CSS text-4, svgwg

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (7) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.white-space
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`white-space`	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`break-spaces`	✓76	✓79	✓69	✓62	✓13.1	✓76	✓79	✓54	✓13.4	✓12.0	✓76	✓13.4
`collapse`	✓114	✓114	✓124	✓100	✓18	✓114	✓124	✓76	✓18	✓23.0	✓114	✓18
`discard-after`	×	×	×	×	✓preview	×	×	×	×	×	×	×
`discard-before`	×	×	×	×	✓preview	×	×	×	×	×	×	×
`discard-inner`	×	×	×	×	✓preview	×	×	×	×	×	×	×
`none`	×	×	×	×	✓preview	×	×	×	×	×	×	×
`normal`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`nowrap`	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`pre`	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
`pre-line`	✓1	✓12	✓3.5	✓9.5	✓3	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
`pre-wrap`	✓1	✓12	✓3	✓8	✓3	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
`preserve`	✓114	✓114	✓124	✓100	✓18	✓114	✓124	✓76	✓18	✓23.0	✓114	✓18
`preserve-breaks`	✓114	✓114	✓124	✓100	✓18	✓114	✓124	✓76	✓18	✓23.0	✓114	✓18
`preserve-spaces`	×	×	✓124	×	×	×	✓124	×	×	×	×	×
Accepts shorthand values	◐114	◐114	◐124	◐100	×	◐114	◐124	◐76	×	◐23.0	◐114	×
On SVG elements	×	×	✓36	×	×	×	✓36	×	×	×	×	×
Support on <textarea>	✓1	✓12	✓36	✓4	✓1	✓18	✓36	✓14	✓1	✓1.0	✓37	✓1
`wrap`	✓114	✓114	✓124	✓100	✓18	✓114	✓124	✓76	✓18	✓23.0	✓114	✓18
Ещё 7 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

white-space: normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'>;

/* Глобальные значения */
white-space: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке; | — выбор варианта.

JavaScript синтаксис:

JavaScript

element.style.whiteSpace = "pre-wrap";

Начальное значение свойства

normal.

Значения свойства

Значения white-space
Значение	Описание
`normal`	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательский перенос на новую строку обрабатывается как пробельный символ. Перенос текста на новую строку происходит автоматически по необходимости (по заполнению отведенной, либо заданной области). Начальное значение.
`nowrap`	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательский перенос на новую строку обрабатывается как пробельный символ. Перенос текста на новую строку производится только в том случае если присутствует элемент `<br>` (текст может выходить из отведённой области).
`pre`	Все пробелы и переносы строк сохраняются (текст может выходить из отведённой области). Значение свойства действует как одноимённый элемент `<pre>`.
`pre-line`	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательские переносы на новую строку учитываются. Перенос текста на новую строку происходит автоматически по необходимости (по заполнению отведенной, либо заданной области).
`pre-wrap`	Все пробелы и переносы строк сохраняются, как при использовании элемента `<pre>`, но в случае если элемент выходит из заданной области, то он переносится на новую строку в автоматическом режиме.
`break-spaces`	Сохраняет пробелы, в том числе в конце строки, и допускает перенос после каждого сохранённого пробела.
`collapse \| preserve \| preserve-breaks \| preserve-spaces`	Значения white-space-collapse управляют сохранением пробелов и переводов строк; поддержка отдельных вариантов различается.
`wrap \| nowrap`	Значения text-wrap-mode разрешают или запрещают автоматический перенос.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для наследуемого свойства `white-space` наследует вычисленное значение у родительского элемента.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Text — спецификация white-space.

Наследуется

Да.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Пробелы и переводы строк

В HTML несколько пробелов и перевод строки. Замените pre-wrap на pre или normal.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html