Свойство word-break позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера. Знак переноса '-' при этом не появляется (используйте для этого hyphens).

Существует очень похожее свойство word-wrap (устаревшее название), оно же overflow-wrap (новое название), которое делает практически то же самое, с минимальными отличиями.

Отличия: если задаем word-wrap: break-word, то слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

Свойство word-break обладает большим приоритетом, чем word-wrap (overflow-wrap).

См. также CSS свойства hyphens, word-wrap, overflow-wrap, а также символы мягкого переноса wbr и ­ и тег br.

Кроме того, вам могут пригодиться CSS свойства overflow, white-space, text-overflow.

Синтаксис

селектор {
	word-break: break-all | keep-all | normal | inherit;
}

Значения

Значение Описание
break-all Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер.
keep-all Для переноса иероглифов.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер - оно просто вылезет за его границу (при этом начнется с новой строчки).
inherit Наследует значение родителя.

Значение по умолчанию: normal.

Примеры

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

p {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример . Значение break-all

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку, а вот слово на новую строку переносится больше не будет:

p {
	width: 200px;
	word-break: break-all;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример . Сравните с word-wrap (overflow-wrap): break-word

В отличие от word-break: break-all, при word-wrap: break-word длинное слово начинается с новой строки:

p {
	width: 200px;
	border: 1px solid red;
	word-wrap: break-word;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример . Приоритет word-wrap (overflow-wrap) и word-break

Свойство word-break обладает большим приоритетом, чем word-wrap (overflow-wrap). Длинное слово не начинается с новой строки - это значит, что приоритетнее word-break:

p {
	width: 200px;
	border: 1px solid red;
	word-wrap: break-word;
	word-break: break-all;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.