字断 | word-break
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
——使用默认换行符规则。
形式语法
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 |