white-space-collapse

Базовая версия 2024

Новое

С марта 2024 года эта функция работает на последних версиях браузеров и устройств. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

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

Примечание: Свойства white-space-collapse и text-wrap могут быть объявлены вместе с помощью сокращённого свойства white-space.

Синтаксис

/* Keyword values */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;

/* Global values */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;

Свойство white-space-collapse задаётся одним ключевым словом из списка значений ниже.

Значения

collapse

Последовательности пробелов сжимаются.

preserve

Последовательности пробелов и символы разрыва строки сохраняются.

preserve-breaks

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

preserve-spaces

Последовательности пробелов сохраняются, а табуляции и символы разрыва строки преобразуются в пробелы.

break-spaces

Поведение идентично preserve, за исключением:

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

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

Сжатие пробелов

Пользовательские агенты обрабатывают сжатие пробелов следующим образом:

Табуляции обычно преобразуются в пробелы.
Если символы разрыва строки нужно сжать:
- Последовательности символов разрыва строки сжимаются до одного символа разрыва строки.
- Они преобразуются в пробелы в случае языков, которые разделяют слова пробелами (например, английский), или удаляются полностью в случае языков, которые не разделяют слова пробелами (например, китайский).
Если пробелы нужно сжать:
- Пробелы или табуляции до или после символов разрыва строки удаляются.
- Последовательности пробелов преобразуются или «сжимаются» в один пробел.
При сохранении пробелов последовательности пробелов обрабатываются как неразрывные, за исключением того, что они будут переноситься на следующую строку в конце каждой последовательности — т. е. следующая строка всегда будет начинаться с следующего не-пробельного символа. Однако в случае значения break-spaces потенциально может произойти перевод строки после каждого пробела, поэтому следующая строка может начаться с одного или нескольких пробелов.

Формальное определение

Начальное значение	`collapse`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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

Примеры

HTML

<h2 class="collapse">Default behavior;
  all   whitespace   is   collapsed
  in    the          heading       .</h2>

<h2 class="preserve">In this case
  all   whitespace   is   preserved
  in    the          heading       .</h2>

<h2 class="preserve-breaks">In this case only
  the   line breaks  are  preserved
  in    the          heading       .</h2>

CSS

.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
}

Результат

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

Спецификация
CSS Text Module Level 4 # white-space-collapsing

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`white-space-collapse`	114	114	124	100	17.4	114	124	76	17.4	23.0	114
`break-spaces`	114	114	124	100	17.4	114	124	76	17.4	23.0	114
`collapse`	114	114	124	100	17.4	114	124	76	17.4	23.0	114
`preserve`	114	114	124	100	17.4	114	124	76	17.4	23.0	114
`preserve-breaks`	114	114	124	100	17.4	114	124	76	17.4	23.0	114
`preserve-spaces`	Нет	Нет	124	Нет	Нет	Нет	124	Нет	Нет	Нет	Нет

См. также

Сокращение для white-space-collapse и text-wrap: Свойство white-space.
Модуль CSS текст

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse