概要
CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为
overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。| 初始值 | normal |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
值
normal- 表示在正常的单词结束处换行。
break-word表示如果行内没有多余的地方容纳该单词到结尾，则哪些正常的不能被被分割的单词会被强制分割换行。-
形式语法
normal | break-word
示例
p { width: 13em; background: gold; }
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)
p { width: 13em; background: gold; overflow-wrap: break-word; }FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Text Level 3 | Working Draft |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1) | 1.0 | 5.5 | 10.5 | 1.0 |
| Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.1) | 1.0 | ? | ? | 1.0 |
word-wrap:break-word 在缺少 pre{white-space:pre-wrap} 时 在 IE5.5-7 也能有效。white-space有示例。- IE8 引入
-ms-word-wrap 作为 word-wrap 的同义词。不建议使用 -ms- 前缀。
另参见
- 微软源文档: MSDN Microsoft library word-wrap
- CSS Text Module Level 3:https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap
word-break