Свойство white-space

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент pre, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу pre, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

visibility: visible | hidden | collapse;
Значение Описание
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление br переносит текст на новую строку.
pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #whi {
 width: 100px;
 height: 100px;
 border: 3px solid rgb(211, 43, 226);
 white-space: pre;
 }
 </style>
 <div id='whi'>
 Далеко-далеко за словесными горами в стране.
 </div>
</body>
</html>
Далеко-далеко за словесными горами в стране.

Читайте также

Свойство mix-blend-mode

Указывает режим наложения исходного цвета на фоновый цвет или фоновое изображение.<br><b...

Свойство background-blend-mode

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

Свойство border-bottom-width

Устанавливает толщину границы внизу элемента.

Свойство align-self

Используется для выравнивания флекс - элементов текущей строки. Аналог align-items, отличие в том...

Свойство overflow-x

Управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещ...