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.
Свойство 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 type | discrete |
Синтаксис
Свойство 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 |
Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Переносятся |
Формальный синтаксис
Примеры
Основной пример
code {
white-space: pre;
}
Перенос строк внутри элементов <pre>
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: pre-wrap; /* текущие браузеры */
}
Спецификации
Specification |
---|
CSS Text Module Level 3 # white-space-property |
Совместимость с браузерами
BCD tables only load in the browser