white-space — это свойство CSS, которое помогает контролировать обработку пробелов и разрывов строк в тексте элемента.
Свойство white-space может принимать следующие значения:
- normal: значение по умолчанию. Несколько пробелов сворачиваются в один. При необходимости текст переносится на следующую строку.
- nowrap: несколько пробелов сворачиваются в один, но текст не переносится на следующую строку. Значение nowrap можно использовать для предотвращения разрывов строк.
- pre: те же результаты, что и при использовании <pre> – все пробелы сохраняются как есть, а текст переносится только тогда, когда в содержимом есть разрывы строк.
- pre-line: несколько пробелов объединяются в один, текст переносится на следующую строку, когда это необходимо, или с помощью разрывов строк в контенте.
- pre-wrap: аналог pre, но при необходимости текст переносится.
Читайте также: Как предотвратить разрывы строк в CSS
Примеры
Ниже мы рассмотрим несколько примеров того, как CSS-свойство white-space с разными значениями влияет на отображение контента.
Значение white-space: normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Значение white-space: nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Значение white-space: pre
Здесь мы вручную включили разрывы строк и лишние пробелы. Обратите внимание на дополнительный разрыв строки в начале. Это потому, что в разметке текст начинается со строки после элемента <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Значение pre-line
Здесь текст прерывается, когда это необходимо, но мы также вручную разбили последние несколько слов и добавили те же дополнительные пробелы – теперь они сворачиваются.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Значение pre-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Здесь лишние пробелы не свернуты.