overflow-wrap

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с октября 2018 года.

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

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

Попробовать

Примечание: В отличие от word-break, overflow-wrap создаст разрыв только в том случае, если целое слово не может быть помещено на отдельную строку без переполнения.

Синтаксис

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

Свойство overflow-wrap указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

normal: Строки могут разрываться только на обычных разрывах слов (например, пробел между двумя словами).
anywhere: Чтобы предотвратить переполнение, иначе неразрывная строка символов — например, длинное слово или URL — может быть разделена в любом месте, если нет других приемлемых точек разрыва в строке. Символ дефиса не вставляется в точке разрыва. Возможности мягкого переноса, введенные разрывом слов, учитываются при вычислении минимального содержимого внутренних размеров.
break-word: То же самое, что и значение anywhere, с обычно неразрывными словами, которые могут быть разделены в произвольных точках, если нет других приемлемых точек разрыва в строке, но возможности мягкого переноса, введенные разрывом слов, НЕ учитываются при вычислении минимального содержимого внутренних размеров.

Формальное определение

Начальное значение	`normal`
Применяется к	текстовым элементам
Наследуется	да
Вычисляемое значение	как указано
Тип анимации	дискретный

Формальный синтаксис

overflow-wrap = 
  normal      |
  break-word  |
  anywhere

Примеры

Сравнение overflow-wrap, word-break и дефисов

В этом примере сравниваются результаты overflow-wrap, word-break, и hyphens при разбиении длинного слова.

HTML

<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>

CSS

p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

Результат

Спецификации

Спецификация
CSS Text Module Level 3 # overflow-wrap-property

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`overflow-wrap`	231	1812	493.5	12.110.5	71	2518	494	12.111	71	1.51.0	4.41
`anywhere`	80	80	65	67	15.4	80	65	57	15.4	13.0	80
`break-word`	1	12	3.5	10.5	1	18	4	11	1	1.0	4.4
`normal`	1	12	3.5	15	1	18	4	14	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap