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

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

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section>  <div>    <p>      В самом деле, что было бы с нами, если бы вместо общеудобного правила: чин      чина почитай, ввелось в употребление другое, например: ум ума почитай?      Какие возникли бы споры! и слуги с кого бы начинали кушанье подавать?    </p>  </div></section>

#example-element {  width: 16rem;}#example-element p {  border: 1px solid #c5c5c5;  padding: 0.75rem;  text-align: left;}

Сводка

/* Ключевые слова */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;

Синтаксис

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

Значения

normal

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

nowrap

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

pre

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

pre-wrap

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

pre-line

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

break-spaces

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

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

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

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

white-space =
normal|
pre|
pre-wrap|
pre-line|
<'white-space-collapse'>||<'text-wrap-mode'>||<'white-space-trim'>

<white-space-collapse> =
collapse|
discard|
preserve|
preserve-breaks|
preserve-spaces|
break-spaces

<text-wrap-mode> =
wrap|
nowrap

<white-space-trim> =
none|
discard-before||discard-after||discard-inner

Примеры

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

code {  white-space: pre;}

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

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

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

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