overflow-wrap
CSS
property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注意：
In contrast to
word-break
,
overflow-wrap
will only create a break if an entire word cannot be placed on its own line without overflowing.
The property was originally a nonstandard and unprefixed Microsoft extension called
word-wrap
, and was implemented by most browsers with the same name. It has since been renamed to
overflow-wrap
, with
word-wrap
being an alias.
/* 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
property is specified as a single keyword chosen from the list of values below.
normal
Lines may only break at normal word break points (such as a space between two words).
anywhere
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
break-word
anywhere
value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
| 初始值 |
normal
|
|---|---|
| 适用于 | non-replaced inline elements |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
normal | break-word | anywhere
This example compares the results of
overflow-wrap
,
word-break
，和
hyphens
when breaking up a long word.
<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>
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
The definition of 'overflow-wrap' in that specification. |
工作草案 | 初始定义 |
| 初始值 |
normal
|
|---|---|
| 适用于 | non-replaced inline elements |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
overflow-wrap
|
Chrome
完整支持
23
|
Edge
完整支持
18
|
Firefox
完整支持
49
|
IE
完整支持
5.5
Alternate Name
|
Opera
完整支持
12.1
|
Safari
完整支持
6.1
|
WebView Android
完整支持
4.4
|
Chrome Android
完整支持
25
|
Firefox Android
完整支持
49
|
Opera Android
完整支持
12.1
|
Safari iOS
完整支持
7
|
Samsung Internet Android
完整支持
1.5
|
anywhere
|
Chrome 完整支持 80 | Edge 完整支持 80 | Firefox 完整支持 65 | IE 不支持 No | Opera 完整支持 67 | Safari 不支持 No | WebView Android 完整支持 80 | Chrome Android 完整支持 80 | Firefox Android 完整支持 65 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 完整支持 13.0 |
break-word
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 3.5 | IE 完整支持 5.5 | Opera 完整支持 10.5 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 11 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
使用非标名称。