HTML и CSS / Перенос слов

Стили CSS для организации переноса строки по словам или буквам, когда она не вмещается в заданные границы

overflow-wrap: break-word;
word-wrap: break-word;
white-space: nowrap / white-space: normal: nowrap;
word-break: keep-all  / word-break: break-all;
line-break: loose / normal / strict;
hyphens: none / auto;

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal

Текст в окне браузера выводится как обычно,  переносы строк устанавливаются автоматически.

nowrap

Пробелы не учитываются,  переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br>  переносит текст на новую строку.

pre

Текст показывается с учетом всех пробелов и  переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

pre-line

В тексте пробелы не учитываются, текст автоматически  переносится на следующую строку, если он не помещается в заданную область.

pre-wrap

В тексте сохраняются все пробелы и  переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

Наследует значение родителя.

Пример 1.  Использование тега <wbr>

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один<wbr>надцатиклас<wbr>сница Анжелика после окончания школы выбрала профессию дело<wbr>произ<wbr>водитель<wbr>ницы.</p>

Пример 2. Мягкий  перенос

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Один&shy;надцатиклас&shy;сница Анжелика после окончания школы выбрала профессию дело&shy;произ&shy;водитель&shy;ницы.</p>

Пример 3. Свойство word-break

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
word-break: break-all;
}
<p class="word">Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.</p>

Пример 4. Использование hyphens

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}

Пример 5. Запрет  переносов

.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
<p class="word">Озеро по координатам 70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш.97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.</p>