white-space、word-wrap和word-break的简单整理

white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。

white-space

white-space属性定义了如何处理文本中的空白；具体到细节，主要决定决定了如何处理元素内文本中空白符、换行符、是否允许过长行折行;
其中，过长行是指那些单行内容宽度超出了容器宽度的行，以下列代码为例：

<!--html--> <p>ABCDEFGHIJKOMN</p>

/*css*/ p{width:4em;}

内容行ABCDEFGHIJKOMN渲染宽度为7em，超过所在容器的指定宽度，那么它属于过长行。

white-space属性各可能值的对比

white-space默认值为normal，可选值包括pre、nowrap、pre-wrap、pre-line。

可选值各维度对比

下表对比分析了white-space各值在处理空白符、换行符、折行与否时的不同策略。

值	概述	空白符	换行符	过长行是否折行
normal	合并连续的空白符、换行符为一个空白符；折行；	连续的多个空白符合并成一个；	换行符被当做空白符处理，一同合并；	折行（说明1）
pre	完全保留代码中格式；不折行；	所有空白符保留；	所有换行符保留；	不折行（说明2）
nowrap	合并连续的空白符、换行符为一个空白符；不折行；	连续的多个空白符合并成一个；	换行符被当做空白符处理，一同合并；	不折行（说明2）
pre-wrap	保留所有空白符、换行符；折行；	所有空白符保留；	所有换行符保留；	折行（说明1）
pre-line	空白符合并；换行符保留；折行；	连续的多个空白符合并成一个；	所有换行符保留；	折行（说明1）

说明1：折行（ CJK遇到容器边界自动换行；非CJK由word-wrap和word-break的值决定。）
说明2：不折行（行内容宽度超出容器宽度时的表现由overflow属性决定；word-wrap和word-break设置为任何值都不影响表现。）

其他说明

1.如下方代码(图1)及相应效果图(图2)所示，段落中的换行效果可能来源于两种不同的原因。一种是段落中保留的换行符；另一种情况是过长行的折行效果。
前者在所属容器宽度改变时，仍然是单独一行；后者在所属容器改变时可能合并到其余行中。

word-wrap和word-break

white-space值为normal、pre-wrap、pre-line时，过长行遇到容器边界时会触发折行现象。white-space决定了过长行是否发生折行，而 word-wrap和word-break用于决定如何进行折行。

理解word-wrap和word-break的区别

从易于区分和理解的角度，我引用了“无双”在你真的了解word-wrap和word-break的区别吗？一文中对两个css属性作用的解释：
word-wrap

word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break

word-break 属性用来标明怎么样进行单词内的断句。

关于word-wrap和word-break，我们主要关注word-wrap:break-word和word-break:break-all的区别:
word-wrap先尝试寻找空格、连接符等正常换行点，如果正常换行能满足不超出容器宽度的需求，正常换行；如果正常换行后仍然超出容器宽度，对非CJK长内容进行强制换行。
word-break:break:all直接强制在行末尾换行。

详细论述和验证建议参考张鑫旭大神的word-break:break-all和word-wrap:break-word的区别 和 无双的你真的了解word-wrap和word-break的区别吗？，两篇文章阐述都清晰明了，此处不班门弄斧；引出基本的概念和理解主要为了引出后续的组合引用效果表格。

word-wrap和word-break的组合引用效果

word-wrap默认值normal，可选值break-word;
word-break默认值normal，可选值为break-all，keep-all。非CJK文本下，keep-all和normal的表现是一致的。
下表列出了word-wrap和word-break的组合使用效果。

组合	效果
word-wrap:normal; word-break:normal;	遵循默认规则折行； 如没有-和空白符，不折行(说明1)；
word-wrap:normal; word-break:break-all;	内容遇到容器末尾强制执行换行；
word-wrap:break-word; word-break:normal;	优先尝试正常折行； 正常折行后仍然过长的，强制在遇到容器末尾时换行；
word-wrap:break-word; word-break:break-all;	内容遇到容器末尾强制执行换行(非末行均占满容器宽度)； （不优先尝试-和空白符等折行规则）

说明1：超出容器宽度后的效果优overflow属性决定。

End