MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概要

 CSS 属性 word-break 指定了怎样在单词内断行。

初始值normal
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

word-break: normal 
word-break: break-all 
word-break: keep-all

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

normal
使用默认的断行规则。
break-all
对于non-CJK (中文/日文/韩文) 文本,可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-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;
}

规范

规范 状态 注释
CSS Text Module Level 3
word-break
Working Draft  

浏览器兼容性

     
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 15.0 (15.0) 5.5[1] 15 (Yes)
keep-all 44 未实现 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) ? 未实现 ?
keep-all 未实现[2] 未实现[2] 未实现 15.0 (15.0) ? 未实现 9

[1] IE8 引入 -ms-word-break 作为 word-break 的同义词。不推荐使用 -ms- 前缀。

[2] 见 WebKit bug 123782.

相关链接

文档标签和贡献者

标签: 
 此页面的贡献者: Ende93, teoli, fscholz, Sebastianz, paddingme, yan
 最后编辑者: Ende93,