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 ⁨июль 2015 г.⁩.

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

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 class="default-example" id="default-example"> <div id="example-element"> <p> В самом деле, что было бы с нами, если бы вместо общеудобного правила: чин чина почитай, ввелось в употребление другое, например: ум ума почитай? Какие возникли бы споры! и слуги с кого бы начинали кушанье подавать? </p> </div> </section>

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

Примечание: Для управления переносами внутри слов используйте 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 type	discrete

Синтаксис

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

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

nowrap

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

pre

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

pre-wrap

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 |
 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

Примеры

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

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

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 янв. 1970 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content