Перенос строки CSS

Перенести ли текст автоматически или показать в одну строку, отобразить рядомстоящие пробелы как один или каждый в отдельности определяет white-space [w3.org].

<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.

<style>
div {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div>ноль один  <code>&lt;br&gt;</code><br>   три    <kbd>Enter</kbd>
     пять      шесть</div>

Блочный элемент

Всё содержимое блочного элемента будет перенесено на отдельную строку с любым значением свойства white‑space.

<style>
#raz {
  white-space: nowrap;
  border: 1px solid red;
}
</style>

<div id="raz">ноль один  <div><code>&lt;div&gt;&lt;/div&gt;</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"; /* &#10; в HEX обозначен \A */ 
  white-space: pre;
}
</style>

<div>Текст</div>

У моноширинного шрифта все символы одной ширины, в том числе пробел

<style>
div {
  white-space: pre;
  overflow: auto;
  font-family: monospace;
  line-height: normal;
}
</style>

<div>Дельфин из символов</div>