Свойство 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>

Описание

Синтаксис

Подробности

Пример

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

Свойство background

Свойство border-bottom

Свойство grid-column-end

Свойство border-color