Свойство CSS word-wrap

Свойство word-wrap разбивает длинные слова, которые иначе невозможно перенести, чтобы они помещались в контейнер, а не выходили за его пределы.

Обычно браузер переносит текст только в «мягких точках переноса» — пробелах, дефисах и похожих символах. Длинная строка без таких точек (URL, хэш, химическое название, длинный идентификатор) не имеет места для переноса, поэтому она вылезает за пределы узкого блока и может нарушить вёрстку. word-wrap позволяет браузеру разбить такое слово посередине в крайнем случае.

Когда использовать

Используйте word-wrap, когда пользовательский или непредсказуемый текст может быть длиннее контейнера:

URL и пути к файлам внутри карточки с фиксированной шириной или боковой панели.
Адреса электронной почты, имена пользователей или токены в узком столбце.
Длинные непрерывные строки в таблицах, пузырях чата или ветках комментариев.
Любой адаптивный макет, где нельзя гарантировать место переноса текста.

Это важно только для слов, которые иначе не переносятся. Обычная проза уже переносится по пробелам, поэтому свойство там не имеет видимого эффекта.

word-wrap и overflow-wrap

word-wrap — оригинальное название от Microsoft, которое спецификация CSS позже стандартизировала как overflow-wrap. Они являются псевдонимами — делают ровно одно и то же и принимают одинаковые значения. Браузеры внутренне сопоставляют word-wrap с overflow-wrap.

Используйте overflow-wrap в новом коде для соответствия стандартам; сохраняйте word-wrap, если требуется поддержка очень старых браузеров, поскольку некоторые устаревшие движки распознают только старое имя.

Внимание

Не путайте word-wrap с word-break. word-wrap/overflow-wrap разрывает слово только тогда, когда иначе оно выходило бы за пределы — нормальные слова остаются целыми. word-break: break-all действует агрессивнее: разрывает слова в любом символе, даже если они умещаются. Выбирайте word-wrap, когда нужен чистый перенос, срабатывающий лишь в аварийных случаях.

word-wrap — одно из свойств CSS3, и оно вступает в силу только тогда, когда свойство white-space допускает перенос (например, оно не имеет эффекта при white-space: nowrap).

Начальное значение	normal
Применяется к	Всем элементам.
Наследуется	Да.
Анимируемое	Нет.
Версия	CSS3
DOM-синтаксис	object.style.wordWrap = "break-word";

Синтаксис

Значения CSS word-wrap

word-wrap: normal | break-word | initial | inherit;

Пример свойства word-wrap со значением "normal":

Пример кода CSS word-wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Попробуйте сами »

Результат

При значении normal длинные строки simply... и industry... не имеют точки переноса, поэтому они выходят за пределы блока шириной 120px.

Пример свойства word-wrap со значением "break-word":

Пример CSS word-wrap break-word

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Попробуйте сами »

Теперь break-word позволяет браузеру разбивать длинные строки посередине слова на границе блока, и содержимое аккуратно остаётся в контейнере шириной 120px.

Значения

Значение	Описание
normal	Переносит слова только в допустимых точках переноса. Значение по умолчанию.
break-word	Разрешает перенос непереносимых слов, если они превышают ширину контейнера.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Связанные свойства

overflow-wrap — стандартизированное имя для того же поведения; предпочтительно в новом коде.
word-break — более агрессивный перенос, который может разбивать слова даже тогда, когда они помещаются.
white-space — управляет тем, переносится ли текст вообще; word-wrap применяется только при разрешённом переносе.
word-spacing — регулирует расстояние между словами (не связано с переносом, но легко перепутать по названию).

Практика

Какое утверждение верно в отношении свойства CSS word-wrap?

Это анимируемое свойство.Оно действует только тогда, когда свойство white-space допускает перенос.Значение break-words переносит слова в допустимых точках переноса.