Перенос длинных слов в CSS при переполнении контейнера - распространенная задача в веб-верстке. Свойство word-wrap позволяет эффективно с этим справиться. Давайте разберемся, как управлять переносами с помощью word-wrap.
Что такое переполнение текста в CSS
Переполнение (overflow) возникает, когда текст или контент выходит за границы блока, в котором находится.css wrap word Это происходит, например, при длинных словах или URL, которые не помещаются в заданную ширину. Браузер по умолчанию показывает переполнение, чтобы избежать потери данных.
Переполнение лучше видеть, чем слова исчезали или обрезались, как при overflow: hidden. 
Причины переполнения текста
Основные причины переполнения в CSS:
- Длинные слова без пробелов, например, url-адреса
- Текст на неадаптивном сайте при сужении окна браузера
- Ошибки верстки из-за неправильных размеров или
box-sizing - Некорректные стили текста, например, запрет переносов
Во всех случаях слова или строки выходят за границы родительского элемента, вызывая переполнение.
Пример переполнения
На рисунке видно, как длинное слово выходит за пределы заданной ширины блока:
Это приводит к следующим проблемам:
- Портит внешний вид страницы
- Мешает читать и понимать текст
- Нарушает адаптивный дизайн на мобильных
Поэтому важно контролировать переносы в CSS и не допускать переполнения.
Почему переполнение по умолчанию visible
Браузеры показывают переполнение по умолчанию, чтобы избежать потери данных ( data loss ). Это когда часть текста обрезается и исчезает совсем. Так происходит, например, при overflow: hidden.
Лучше видеть беспорядочное переполнение, чем потерять важную информацию. Его проще заметить во время верстки и исправить. А обрезанный текст может остаться незамеченным.
Как найти минимальный размер контейнера
Чтобы текст не переполнял контейнер, нужно задать ему минимальную ширину. Для этого используется значение min-content:
.container { width: min-content; }Браузер автоматически рассчитает и задаст минимальный размер, в который поместится текст без переноса.
Это хороший способ избежать переполнения в CSS grid и flexbox при неизвестной ширине контента.
Свойство word-wrap в CSS
Теперь перейдем непосредственно к свойству word-wrap и разберем, как с его помощью управлять переносом слов.
Назначение свойства word-wrap
Свойство word-wrap используется для переноса длинных слов в CSS, которые не помещаются в строку целиком и вызывают переполнение.
Оно позволяет:
- Разрывать слова по символам при переполнении
- Контролировать переносы текста в CSS
- Избегать выхода элементов за границы родителя
Благодаря этому, можно легко решать проблему переполнения длинных слов и url.
Поддержка браузерами
Свойство word-wrap поддерживается всеми современными браузерами, включая мобильные:
- Chrome
- Firefox
- Safari
- Opera
- Edge
В старых версиях Internet Explorer для переноса текста использовалось свойство word-wrap без префикса. Сейчас это устаревшее название сохранено как псевдоним стандартного word-wrap.
Синтаксис
Синтаксис свойства word-wrap прост:
.element { word-wrap: value; }Где value - это одно из допустимых ключевых значений:
normal- перенос по словамbreak-word- перенос по символам
Рассмотрим их подробнее далее.
Значения свойства word-wrap
У свойства word-wrap два возможных значения:
- normal - это значение по умолчанию. При нем перенос слов происходит только в допустимых местах, например, по пробелам. Длинные слова могут вызывать переполнение.
- break-word - браузер будет переносить слова в любом месте при переполнении. Это позволяет избежать выхода текста за границы блока.
Таким образом, break-word дает возможность контролировать переносы и предотвратить переполнение в CSS.
Разница между word-wrap и word-break
Свойства word-wrap и word-break похожи, но есть важные отличия:
- word-break переносит слова, даже если есть место для целого
- word-wrap переносит, только если слово не помещается целиком
Поэтому word-wrap более гибкий инструмент для контроля переносов в CSS.
Пример использования word-wrap
Рассмотрим пример применения word-wrap: break-word:
.text { width: 250px; word-wrap: break-word; }В этом примере задана фиксированная ширина блока 250px. Свойство word-wrap: break-word разрешает переносить слова по символам, если они не помещаются в одну строку.
Это позволит избежать переполнения длинных слов и URL при заданной ширине .text.
Перенос длинных слов и URL
Word-wrap особенно полезен при отображении длинных слов без пробелов и URL:
<p>https://verylongdomainname.com/path/to/file</p>Без word-wrap: break-word этот url вызовет переполнение. А свойство позволит разбить url на части по символам и отобразить корректно.
Аналогично решается проблема с очень длинными словами вроде "антидисседиметраметательствовали".
Сравнение со свойствами overflow-wrap и hyphens
Помимо word-wrap, для управления переносами в CSS используются два других свойства:
overflow-wrap- аналог word-wrap, но не разрывает слова с пробеламиhyphens- автоматически добавляет дефисы при переносе
Word-wrap более универсальный и надежный инструмент для предотвращения переполнения текста в CSS.
