Перейти к содержанию

overflow-wrap

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

Синтаксис

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

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

Значения

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

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

Пример

```html tab="HTML"

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (normal)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (overflow-wrap: anywhere)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (overflow-wrap: break-word)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (word-break)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (hyphens, without lang attribute)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (hyphens, English rules)

They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (hyphens, German rules) 

```css tab="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;
}

Результат:

overflow-wrap

См. также

Ссылки