CSS свойство overflow-wrap

Свойство overflow-wrap определяет, может ли браузер разрывать строки внутри неразрывных строк, таким образом избегая выхода контента за границы элемента.

Свойство overflow-wrap имеет три значения - normal, anywhere и break-word.

Overflow-wrap - это стандартное название для свойства word-wrap.
Значение по умолчанию normal
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.overflowWrap = "normal";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      p {
      width: 200px;
      margin: 3px;
      background: #ccc;
      }
      .anywhere { 
      overflow-wrap: anywhere; 
      }
      .break-word {
      overflow-wrap: break-word;
      }
      .normal {
      overflow-wrap: normal;
      }
      .auto {
      overflow-wrap: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-wrap</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum - это текст-"рыба", <em class="normal"> dummydummydummydummydummydummydummydummy</em> часто используемый в печати и вэб-дизайне.
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum - это текст-"рыба"<em class="anywhere">dummydummydummydummydummydummydummydummy </em>часто используемый в печати и вэб-дизайне.
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum - это текст-"рыба" <em class="break-word">dummydummydummydummydummydummydummydummy </em>часто используемый в печати и вэб-дизайне.
    </p>
    <h3>Overflow-wrap: auto</h3>
    <p>Lorem Ipsum - это текст-"рыба" <em class="auto">dummydummydummydummydummydummydummydummy</em> 
      часто используемый в печати и вэб-дизайне.
    </p>
    </div>
  </body>
</html>

Значения

Значение Описание
normal Разрыв строк происходит только согласно обычным правилам разрыва. Разрыв слов не происходит, даже если они выходят за границы контейнера. Значение по умолчанию.
anywhere Длинные слова или URL будут перенесены в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется, даже если использовано свойство hyphens.
break-word Длинные слова или строки символов, которые не помещаются внутри контейнера, будут перенесены в произвольном месте.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
23.0+ 18.0+ 49.0+ 6.1+ 12.1+

Практикуйте свои знания

Что делает свойство CSS 'overflow-wrap'?
Считаете ли это полезным?