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

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

Свойство управляет тем, как обрабатываются длинные слова, когда они превышают ширину контейнера. Оно не принимает положительные или отрицательные значения; они относятся к свойству word-spacing. При значении normal слова разрываются только в разрешённых местах разрыва.

Свойство word-wrap является одним из свойств CSS3.

Оно действует только тогда, когда свойство white-space разрешает перенос строк.

INFO

В современном CSS word-wrap является псевдонимом для свойства overflow-wrap.

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

Синтаксис

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

css

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

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

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

html

<!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>

Try it Yourself »

Результат

CSS word-wrap property

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

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

html

<!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>

Try it Yourself »

Значения

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

Практика

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

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

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

Синтаксис ​

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

Результат ​

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

Значения ​