Свойство 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-blend-mode
Описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов....
Свойство column-gap
Задаёт расстояние между колонками в многоколоночном тексте....
Свойство border-bottom-width
Устанавливает толщину границы внизу элемента....
Стиль первой строки форматированного текста
Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шр...