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 октябрь 2018 г..
CSS свойство overflow-wrap применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.
Интерактивный пример
overflow-wrap: normal; overflow-wrap: anywhere; overflow-wrap: break-word; <section class="default-example" id="default-example"> <div class="example-container"> Most words are short & don't need to break. But <strong class="transition-all" id="example-element" >Antidisestablishmentarianism</strong > is long. The width is set to min-content, with a max-width of 11em. </div> </section> .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
/* 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
<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; } Result
Спецификации
| Specification |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |