Данное свойство CSS не относится к разряду тех, которые используются в любом дизайне. Однако оно может оказаться гораздо более полезным, чем все модные свойства CSS3, такие как transition и т.д.

Верите вы или нет, но свойство CSS3 word-wrap работает в всех браузерах, включая все версии IE (даже в IE5).

Хотя обычно CSS3 ассоциируется с новыми браузерами, таким как Safari и Chrome, спецификация CSS3 начала разрабатываться в 2001 году. Так что некоторые свойства (как word-wrap) уже поддерживаются достаточно давно.

Синтаксис

Свойство word-wrap может принимать два значения, одно из которых устанавливается по умолчанию:

Очень просто и очень практично, если вы понимаете, что оно делает.

Что оно делает?

Текст, на который указывает селектор, будет переноситься на следующую строку и при этом любое длинное слово, которое может потенциально выходить за границы элемента, будет разрываться.

Например, у вас может быть определенный элемент шириной 200 px, а внутри него может быть расположена ссылка, которая содержит действительно длинное слово, которое растягивает элемент  (то есть общая длина становится больше 200 px и без пробелов). Если установлено свойство word-wrap со значением break-word, то слово действительно будет разрываться и переноситься на следующую строку, так чтобы шаблон не нарушался.

Пример без использования свойства word-wrap:

А здесь тот же пример, но с добавленным свойством word-wrap: break-word:

Как это можно использовать на практике?

В комментариях блога, люди, теоретически, могут делать пакости, размещая очень длинное слово. В таком  случае нарушается структура страницы и она выглядит ужасно. Иногда такое происходит, когда кто-нибудь размещает длинную ссылку, которой нет разрывов. Такой тип вандализма может быть предотвращен с помощью свойства word-wrap,  добавленного к секции комментариев блога.

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