Иногда длинные слова не помещаются в отведенное им пространство:
Автоматические средства переноса с помощью CSS (word-wrap: break-word) работают не очень хорошо: слово просто механически, а не поправилам языка, разрезается на части. Что еще хуже, нет символа переноса:
Лучший способ — расставить в слове невидимые мягкие переносы («soft hyphen», ­ или \u00AD). Они отличаются от обычных дефисов тем, что видны только тогда, когда необходимо. Но так как символ мягкого переноса невидим, расставить его не так просто.
Для расстановки мягких переносов удобно использовать специальный инструмент:
Посмотрим, что получилось и как ведет себя подготовленная строка.
Когда ширины достаточно, слово выглядит как обычно:
Но если слово попадает в узкое пространство, перенос слова появляется ровно в нужном месте:
Шикарно!