Как переносить длинные слова на новую строку с помощью CSS
Длинные строки могут «выпирать» за пределы контейнеров и ломать структуру DOM. Браузеры по умолчанию не разрывают неразрывные строки, поэтому нужно явно задать правило переноса. Это улучшит читаемость, адаптивность и устойчивость макета при любых входных данных от пользователя.
Как работает перенос текста в CSS
Браузеры управляют переносом слов с помощью нескольких CSS-свойств. Основные из них:
- overflow-wrap (рекомендуется) — указывает, что строка может быть перенесена внутри слова, если это необходимо.
- word-wrap — исторический алиас для overflow-wrap, по-прежнему работает.
- word-break — управляет тем, где можно разрывать слова; полезно для алфавитов без пробелов (китайский, японский), или когда нужно более агрессивное поведение.
- hyphens — управляет автоматическим переносом с дефисами в поддерживаемых языках.
Коротко: чаще всего достаточно overflow-wrap: break-word; для большинства задач. Для особых случаев добавляют word-break или hyphens.
Свойства и их поведение
- break-word: фактическое значение, которое говорит браузеру разрешать перенос внутри слова.
- normal: обычное поведение — перенос в точках разделения (пробелы, дефисы), не разрывает длинные непрерывные строки.
- initial / inherit: стандартные служебные значения; не решают проблему, если родитель не настроен на перенос.
Важно: word-wrap — устаревший термин, но по-прежнему поддерживается как синоним overflow-wrap. Для современных решений ориентируйтесь на overflow-wrap.
Пример: перенос в контейнере
Исходный случай: длинный заголовок или строка URL выходит за границы блока.
Правильный HTML и CSS для простого контейнера:
HTML:
This-div-contains-the-long-h2-lorem-text-demonstrated-in-the-image-aboveCSS (рекомендуемое):
.wrap-it {
overflow-wrap: break-word; /* современное, предпочтительное */
word-wrap: break-word; /* для обратной совместимости */
hyphens: auto; /* позволяет браузеру ставить дефисы при доступности словарей */
}Альтернативно, более агрессивный вариант (внимание: может ломать чтение для некоторых языков):
.wrap-it-aggressive {
word-break: break-all; /* разрывает слово в любом месте при необходимости */
}После применения overflow-wrap текст аккуратно переносится на новую строку и макет остаётся целым:
Когда какой метод использовать
- overflow-wrap: break-word — стандартный выбор для блоков с контентом, где важно не ломать макет.
- word-break: break-all — когда у вас тексты без пробелов (CJK) или вы готовы к радикальным разрывам внутри слов.
- hyphens: auto — когда нужно красивое автоматическое перенесение с дефисами (проверяйте поддержку словарей локали).
Important: сочетайте свойства осторожно. Например, для заданий в разных языках можно включать hyphens только для тех блоков, где язык известен.
Советы по совместимости и лучшие практики
- Всегда добавляйте и overflow-wrap, и word-wrap для покрытия старых браузеров.
- Не ставьте word-break: break-all глобально — это может ухудшить читаемость.
- Для ссылок используйте CSS-правило, чтобы длинные URL не ломали строку:
a {
overflow-wrap: anywhere; /* позволяет переносить в удобных местах */
}- Проверяйте поведение на мобильных устройствах и в реальных данных (подставные длинные слова, ссылки из пользовательского контента).
Когда перенос не сработает и обходные решения
- Если элемент имеет white-space: nowrap или display: inline-block без возможности переноса, перенос не произойдёт — снимите nowrap или измените display.
- В таблицах (
