overflow-wrap

概要

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

word-break相比,overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

语法

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

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

将overflow-wrap属性指定为从下面的值列表中选择的单个关键字。

normal
表示在正常的单词结束处换行。
break-word
表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

形式语法

normal | break-word

示例

本示例比较分解长字时的overflow-wrapword-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;
}

结论

规范

Specification Status Comment
CSS Text Module Level 3
overflow-wrap
Working Draft Initial definition
初始值normal
适用元素non-replaced inline elements
是否是继承属性yes
计算值as specified
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overflow-wrapChrome Full support 23
Full support 23
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Edge Full support 18
Full support 18
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Full support 49
Full support 49
Full support 3.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
IE Full support 5.5
Alternate Name
Full support 5.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Full support 12.1
Full support 12.1
Full support 10.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Safari Full support 6.1
Full support 6.1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
WebView Android Full support 4.4
Full support 4.4
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Chrome Android Full support 25
Full support 25
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Android Full support 49
Full support 49
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Android Full support 12.1
Full support 12.1
Full support 11
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Safari iOS Full support 7
Full support 7
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Samsung Internet Android Full support 1.5
Full support 1.5
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
anywhereChrome Full support 80Edge Full support 80Firefox Full support 65IE No support NoOpera Full support 67Safari No support NoWebView Android Full support 80Chrome Android Full support 80Firefox Android Full support 65Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
break-wordChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 5.5Opera Full support 10.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.
Uses a non-standard name.

另参见