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

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

Свойство overflow-wrap имеет три основных значения: normal, break-word и anywhere. Оно также поддерживает универсальные ключевые слова CSS initial и inherit.

INFO

Название overflow-wrap считается стандартным для свойства word-wrap.

Overflow-wrap против Word-break

Хотя overflow-wrap и word-break ведут себя схожим образом, между ними есть различия. Свойство overflow-wrap переносит слово, если оно не помещается на строку без выхода за пределы контейнера, независимо от используемого языка. Свойство word-break в основном используется для языков CJK (китайский, японский и корейский), чтобы указать, где могут происходить переносы строк между символами, но оно также предоставляет строгие правила переноса для текста на других языках.

Свойства word-wrap и overflow-wrap

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

Синтаксис

Синтаксис CSS overflow-wrap

css

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

Пример использования свойства overflow-wrap:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 200px;
        margin: 3px;
        background: #ccc;
      }
      .anywhere {
        overflow-wrap: anywhere;
      }
      .break-word {
        overflow-wrap: break-word;
      }
      .normal {
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap property example</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
normal	Перенос строк будет происходить только в соответствии с обычными правилами переноса. Слова не будут переноситься, даже если они выходят за пределы контейнера. Это значение по умолчанию для данного свойства.
anywhere	Длинные слова или URL-адреса будут переноситься в любой точке, если в строке нет других допустимых точек переноса. Символы дефиса не считаются допустимыми точками переноса, даже если установлено свойство `hyphens`.
break-word	Длинные слова или строки, которые не помещаются в контейнер, будут переноситься в произвольной точке для принудительного переноса строки. Возможности мягкого переноса не учитываются при вычислении минимального размера контента элемента.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какова функция свойства CSS 'overflow-wrap'?

Оно определяет, как пользователю показывается переполненный невидимый контентОно указывает, должен ли браузер переносить строки внутри слов для предотвращения переполненияОно управляет поведением свойства 'break-inside'Оно определяет, как обрабатывается дополнительный контент, идущий в направлении, противоположном письмуОно задаёт место, где должен происходить разрыв страницы или колонки

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

Overflow-wrap против Word-break ​

Свойства word-wrap и overflow-wrap ​

Синтаксис ​

Пример использования свойства overflow-wrap: ​

Значения ​