Свойство 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>Читайте также
Свойство padding-block-start
Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соот...
Свойство place-content
Сокращённое свойство place-content одновременно устанавливает значения свойств align-content и justify-content....
Свойство object-fit
Управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования. Сво...
Свойство padding-block-end
Определяет конечный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соотв...