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	Значение элемента наследуется от родительского элемента.


23.0+	18.0+	49.0+	6.1+	12.1+

23.0+

18.0+

49.0+

6.1+

12.1+

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

Синтаксис

Пример

Значения

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

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