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

Свойство white-space-collapse CSS управляет свёртыванием пробельных символов внутри элемента.

Синтаксис

/* 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).

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

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

white-space-collapse = 
  collapse |
  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>

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

CSS

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

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

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

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

h2 {
  font-size: 1.6rem;
  font-family: monospace;
  border-bottom: 1px dotted #cccccc;
}

Результат

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

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

См. также

• Сокращённая запись для white-space-collapse и text-wrap-mode: свойство white-space.
• Модуль CSS Text
• Обработка пробельных символов в CSS