CSS

字断 | word-break

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 valuenormal
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe 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; }

规范

SpecificationStatusComment
CSS Text Module Level 3The definition of 'word-break' in that specification.Working DraftInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)15.0 (15.0)5.51,315(Yes)
keep-all44No support15.0 (15.0)5.5319

FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)18.0(Yes)15.0 (15.0)?No support?
keep-allNo support2No support2No support15.0 (15.0)?No support9