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

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

селектор {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

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

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

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

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

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

Синтаксис

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

Значения

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

Пример . Сравните с word-break: break-all

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

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

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

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.