Почему не работает word-wrap: break-word в Chrome и Firefox

Быстрый ответ

Для корректной работы свойства word-wrap: break-word; его следует применять к блочному элементу с установленной шириной. Вот пример его применения:

<div style="width: 100px; word-wrap: break-word;">
  Обеспечениепереносывсмяслеустановленнойширинеисвойствомwordwrap
</div>

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

Обеспечение совместимости во всех браузерах

Для переноса слов в браузерах Firefox и Chrome добавьте свойство display: inline-block;. В Webkit-браузерах, например Safari, используйте word-break: break-word;. Убедитесь, что свойства, такие как white-space: nowrap;, не противоречат вашим настройкам переноса.

Советы для сложных сценариев

Если word-wrap: break-word; не дает желаемого эффекта, воспользуйтесь word-break: break-all; для более заметного переноса слов. Комбинирование свойств overflow-wrap: break-word; и hyphens: auto; поможет корректно применять дефисы при переносе.

Подробнее об этом расскажет наш спикер на видео

Ошибки, которые лучше избегать

Будьте осторожны с элементами фиксированного макета, например, таблицами с установленной шириной ячеек. По возможности избегайте устаревших и специфических для браузера свойств, таких как -ms-word-break: break-all;, если только вы не намерены поддерживать определенные версии браузеров.

Визуализация

Рассмотрим, почему иногда word-wrap: break-word; не срабатывает:

Представьте поезд (🚂), состоящий из слов, которому необходимо проехать через туннель (🚇):

Без word-wrap: break-word;

🚂 == "Супердлинноеоченьсуществоилиназвание" == 🚇

Этот 🚂 слишком большой для туннеля.

С word-wrap: break-word;

🚂 == "Супер...вание" ➡️ 
 🚃 == "..длинное...ество" 🏞️ ==
 🚃 == "...оченьсущ...мя" 🚇

Во втором примере слова разбиваются на части как вагоны поезда.

Важно: размер вагонов со словами (🚃) должен подходить под размер туннеля (🚇) для успешного проезда.

Update Пространства (регулировка ширины)

Установите ширину элемента, в котором располагается текст. Отсутствие конкретно указанной ширины не позволит браузеру определить, где нужно разрывать текст. Метод text-align: justify; поможет управлять размещением текста.

Примеры направлений для стилей

• Определенные свойства с высоким приоритетом могут переопределить локальные правила word-wrap.
• Используйте инструменты для разработчиков для проверки активных стилей, если текст все еще выходит за границы.
• Будьте акуратны со сложными структурами кода, когда инлайн-элементы находятся внутри других инлайн-структур.
• Проверьте декларацию doctype для стабильной работы свойств и избегания проблем совместимости.

Особые техники решения проблем

• Сдерживание длины URL: word-break: break-all; станет в этом помощником.
• Предотвращение перекрытия текста: если текст перекрывает другие элементы, проверьте отступы или применение абсолютного позиционирования.
• Учет особенностей старых браузеров: для них могут потребоваться вроде вендорные префиксы и специальные правила.

Полезные материалы

1. word-break: MDN — подробное описание свойства CSS word-break.
2. word-break: CSS-Tricks — обзор проблем и особенностей свойства word-break.
3. Таблицы поддержки — информация о поддержке свойства CSS word-break в различных браузерах.
4. CSS word-wrap урок — простое и понятное руководство по word-wrap в CSS.
5. Вопросы по word-wrap — обсуждение и решения вопросов, связанных с word-wrap.
6. word-break vs. word-wrap — различия между word-break и word-wrap.