自动换行 | word-wrap
word-wrap
该overflow-wrapCSS属性指定浏览器是否应该在单词中插入换行符，以防止文本溢出其内容框。与word-break相反，如果整个单词不能在没有溢出的情况下放在自己的行上，overflow-wrap将会创建一个中断。
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
该属性最初是一个非标准的，没有前缀的微软扩展word-wrap，并被大多数的浏览器以该命名实现。现在，它已经被重新命名为overflow-wrap，而word-wrap则作为它一个别名。
| 初始值 | normal |
|---|---|
| 应用范围 | all elements |
| 是否继承 | yes |
| 使用媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该overflow-wrap属性被指定为下面的列表中的任意一个关键字。
可能的值
normal——行只能在正常的单词断点（如两个单词之间的空格）处断开。
形式语法
normal | break-word
实例
CSS
.normal {
width: 13em;
background: gold;
}
.break-word {
width: 13em;
background: lime;
overflow-wrap: break-word;
}
HTML
<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des
Fernstraßenbauprivatfinanzierungsgesetzes
und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
Fernstraßenbauprivatfinanzierungsgesetzes
und straßenverkehrsrechtlicher Vorschriften)</p>
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Text Module Level 3The definition of 'overflow-wrap' in that specification. | Working Draft | Initial definition |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support (as word-wrap) | 3.5 (1.9.1) | 1.0 | (Yes) | 5.5 | 10.5 | 1.0 |
| overflow-wrap | 49 (49) | (Yes) | No support | ? | (Yes) | (Yes) |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support (as word-wrap) | 1.0 (1.9.1) | 1.0 | (Yes) | ? | ? | 1.0 |
| overflow-wrap | 49 (49) | (Yes) | No support | ? | (Yes) | (Yes) |
