字断 | word-break
该word-breakCSS属性规定浏览器是否应该在即将溢出内容文本框的文本处插入分词符。与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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
