Перенести ли текст автоматически или показать в одну строку, отобразить рядомстоящие пробелы как один или каждый в отдельности определяет white-space
[w3.org].
white-space
- текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается
- текст переносится | пробелы не учитываются | Enter учитывается
- текст переносится | пробелы учитываются | Enter учитывается
- текст не переносится | пробелы учитываются | Enter учитывается
- текст не переносится | пробелы не учитываются | Enter не учитывается
normal
- наследует значение родителя
- наследует значение родителя
<style>
div {
white-space: normal; /* свойство white-space
наследуется, применяется ко всем элементам */
border: 1px solid red;
}
</style>
<div>ноль один два три <kbd>Enter</kbd>
пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать</div>
У тега <pre>
по умолчанию white-space
имеет значение pre
.
Значения, отличные от normal
, часто применяются
- в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом
<p>
, а перевод строки обозначается не тегом<br>
, а символом
, который печатает клавиша Enter. - для демонстрации HTML кода.
- для оформления стихов.
Запретить перенос
Значения pre-wrap и pre-line поддерживаются Internet Explorer 8
Запрет переноса с помощью white-space: nowrap;
<style> .nowrap { white-space: nowrap; } </style> Значения <span class='nowrap'>pre-wrap</span> и <span class='nowrap'>pre-line</span> поддерживаются <span class='nowrap'>Internet Explorer 8</span>
Запрет переноса с помощью неразрывного пробела
и/или неразрывного дефиса ‑
В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word;
или word-wrap: break-word;
или word-break: break-all;
символы всё же в определённый момент переходят на следующую строчку.
Значения pre‑wrap и pre‑line поддерживаются Internet Explorer 8
Прокрутка при отключении автопереноса
Часто совместно со значениями pre
или nowrap
элементу меняется значение свойства overflow
, чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.
<style> div { width: 50%; border: 1px solid red; white-space: nowrap; } div:nth-child(2) { overflow: hidden; } div:nth-child(3) { overflow-x: scroll; } div:nth-child(4) { overflow: auto; } </style> overflow: visible; <div>Значения pre-wrap и pre-line поддерживаются IE 8</div> overflow: hidden; <div>Значения pre-wrap и pre-line поддерживаются IE 8</div> overflow-x: scroll; <div>Значения pre-wrap и pre-line поддерживаются IE 8</div> overflow: auto; <div>Значения pre-wrap и pre-line поддерживаются IE 8</div>
Разрыв строки
Тег <br>
Элементы после тега <br>
будут перенесены на следующую строку с любым значением свойства white‑space
.
<br>
три Enter пять шесть
<style> div { white-space: nowrap; border: 1px solid red; } </style> <div>ноль один <code><br></code><br> три <kbd>Enter</kbd> пять шесть</div>
Блочный элемент
Всё содержимое блочного элемента будет перенесено на отдельную строку с любым значением свойства white‑space
.
<div></div>
<style> #raz { white-space: nowrap; border: 1px solid red; } </style> <div id="raz">ноль один <div><code><div></div></code></div> три <kbd>Enter</kbd> пять шесть</div>
Свойство white-space
<style> h1 { white-space: pre-line; } span { padding: 0 .5em; background: black; color: #fff; } </style> <h1>Это должно быть сверху <span>это под ним</span></h1>
Разрыв строки в псевдоэлементах ::before
/::after
<style> div::after { content: "\A Номер: 1 \A Год: 2017"; /*
в HEX обозначен\A
*/ white-space: pre; } </style> <div>Текст</div>
У моноширинного шрифта все символы одной ширины, в том числе пробел
<style> div { white-space: pre; overflow: auto; font-family: monospace; line-height: normal; } </style> <div>Дельфин из символов</div>