CSS参考手册
文本 | Text
自动换行 | word-wrap
该overflow-wrap
CSS属性指定浏览器是否应该在单词中插入换行符,以防止文本溢出其内容框。与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
——行只能在正常的单词断点(如两个单词之间的空格)处断开。
break-word
——为了防止溢出,如果在行中没有其他可接受的断点,通常不能破坏的单词也可能会在任意点被断开。
形式语法
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) |
文本 | Text相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。