CSS参考手册
文本 | Text
字断 | word-break
该word-break
CSS属性规定浏览器是否应该在即将溢出内容文本框的文本处插入分词符。与overflow-wrap
相反,word-break
会在即将溢出其容器的文本位置上创建一个分词符(即使将一整个单词放在自己的行中也使该分词行为无效)。
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;
Initial value |
normal |
---|---|
Applies to |
all elements |
Inherited |
yes |
Media |
visual |
Computed value |
as specified |
Animation type |
discrete |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
语法
该word-break
属性被指定为下面的列表中的任意一个关键字。
可能值
normal
——使用默认换行符规则。
break-all
——为防止溢出,应在任何两个字符(不包括中文/日文/韩文文本)之间插入分词符。
keep-all
中文/日文/韩文(CJK)文本不应使用字符中断。非CJK文字行为与normal
相同 。
形式语法
normal | break-all | keep-all
实例
HTML
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Supercalifragilisticexpialidocious sentence.
次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Supercalifragilisticexpialidocious sentence.
次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow">This is a long and
Supercalifragilisticexpialidocious sentence.
次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
CSS
.narrow {
padding: 5px;
border: 1px solid;
width: 8em;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keep {
word-break: keep-all;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Text Module Level 3The definition of 'word-break' in that specification. |
Working Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
15.0 (15.0) |
5.51,3 |
15 |
(Yes) |
keep-all |
44 |
No support |
15.0 (15.0) |
5.5 |
31 |
9 |
Feature |
Android |
Chrome for Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support |
(Yes) |
18.0 |
(Yes) |
15.0 (15.0) |
? |
No support |
? |
keep-all |
No support2 |
No support2 |
No support |
15.0 (15.0) |
? |
No support |
9 |
文本 | Text相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。