overflow-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

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

Интерактивный пример

overflow-wrap: normal;

overflow-wrap: anywhere;

overflow-wrap: break-word;


  
    Most words are short & don't need to break. But
    Antidisestablishmentarianism
    is long. The width is set to min-content, with a max-width of 11em.

.example-container {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid #663399;
  padding: 0.75em;
  width: min-content;
  max-width: 11em;
  height: 200px;
}

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

Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.

Syntax

css

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

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

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

Values

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

Formal definition

Начальное значение	`normal`
Применяется к	текстовые элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Formal syntax

overflow-wrap = 
  normal      |
  break-word  |
  anywhere

Examples

Сравнение overflow-wrap, word-break, и hyphens

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

HTML

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

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;
}

Result

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

Specification
CSS Text Module Level 3 # overflow-wrap-property