Свойство 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>
Читайте также
initial
Значение применяется для установки исходного значения свойства. Может пригодиться в нескольких сл...
Свойство height
Утанавливает высоту элементов. Она не включает толщину границ вокруг элемента, значение отступов ...
Свойство border-image
Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством b...
Свойство hyphens
Указывает, как расставлять переносы слов в блоке текста.<br><br>Словарь переносов хра...
Свойство column-rule-width
В многоколоночном тексте задаёт толщину линий между колонок.