CSS word-break 详解

初始值	normal
适用元素	all elements
是否是继承属性	yes
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	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 (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

keep-all

CJK 文本不断行。 Non-CJK 文本表现同  normal。

正式语法

示例

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;
}