Свойство overflow-wrap: длинные слова

Как это работает

overflow-wrap разрешает браузеру разрывать непрерывную последовательность символов, если она иначе не помещается. Это полезно для URL, технических идентификаторов и пользовательского текста, где невозможно заранее знать длину слова.

anywhere даёт дополнительные точки переноса и учитывает их при расчёте минимального размера содержимого. break-word внешне часто похож, но отличается в intrinsic sizing. Не переносите произвольно короткие обычные слова без необходимости: читателю важен устойчивый ритм текста.

Пример в интерфейсе

.address { max-width: 240px; overflow-wrap: anywhere; padding: 16px; background: #eaf4ee; }

Значения и поведение

На что обратить внимание

Проверьте на практике

Сделайте контейнер шириной 200px и вставьте длинное имя. Убедитесь, что текст остаётся внутри, а не пропадает из-за overflow: hidden.

Связанные темы: white-space, max-width.