white space
🎓 Текст
Если вы вставите в текст несколько пробелов подряд, браузер по умолчанию будет выводить их как один единственный пробел
Это не всегда удобно
Для вывода текста "как есть" можно воспользоваться элементом pre
Сравним вывод текста в элементе pre с выводом такого же текста, но с помощью обычного элемента p
Для чистоты эксперимента в контейнер head нужно вставить meta-тег, управляющий отображением страницы на различных девайсах:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">Итак, вставим на страницу следующую разметку:
<pre>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</pre>
<p>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</p>и посмотрим, что у нас получилось:
 |
|---|
Теперь внесем небольшие изменения в нашу разметку с помощью CSS
добавим стилевое свойство white-space со значением pre элементу p:
<head>
<style>
p {
white-space: pre;
}
</style>
</head>
<body>
<pre>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</pre>
<p>
_____________________________________________________
The word-break property in CSS
can be used to change
when line breaks ought to occur
Normally, line breaks in text
can only occur in certain spaces,
like when there is a space or a hyphen
______________________________________________________
</p>
</body>Теперь элемент p ведет себя так же, как элемент pre:
 |
|---|
| Возможные значения | |
|---|---|
normal |
Значение по умолчанию Повторяющиеся пробелы и разрывы строк игнорируются, текст переносится по обычным правилам |
nowrap |
Повторяющиеся пробелы и разрывы строк игнорируются, причем разрывы строк подавляются даже тогда, когда текст выходит за границы контейнера |
pre |
Текст выводится "как есть", т.е. выводятся повторяющиеся пробелы и переводы строк, а перевод строки при переполнении ширины контейнера не работает |
pre-line |
Повторяющиеся пробелы игнорируются, текст переносится по обычным правилам, но перевод строки учитывается В старых версиях браузеров поддержка не полная |
pre-wrap |
Аналогично значению pre за исключением того, что строка переносится при переполнении ширины контейнера |
 |
|---|
Всемирная паутина
Пример
Flexbox Froggy
