Как работает CSS-свойство white-space

4 февраля, 2022 11:48 дп 14 views | Комментариев нет

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

Свойство white-space может принимать следующие значения:

normal: значение по умолчанию. Несколько пробелов сворачиваются в один. При необходимости текст переносится на следующую строку.
nowrap: несколько пробелов сворачиваются в один, но текст не переносится на следующую строку. Значение nowrap можно использовать для предотвращения разрывов строк.
pre: те же результаты, что и при использовании <pre> – все пробелы сохраняются как есть, а текст переносится только тогда, когда в содержимом есть разрывы строк.
pre-line: несколько пробелов объединяются в один, текст переносится на следующую строку, когда это необходимо, или с помощью разрывов строк в контенте.
pre-wrap: аналог pre, но при необходимости текст переносится.

Читайте также: Как предотвратить разрывы строк в CSS

Примеры

Ниже мы рассмотрим несколько примеров того, как CSS-свойство white-space с разными значениями влияет на отображение контента.