之所以将word-break、overflow-wrap(word-wrap)和white-space这三个属性放在一起比较，是因为它们都有一个共同的作用，就是控制文本的换行。因为有三个，所以就容易混淆。这个三个属性有时候选任何一个都能实现我们的目标，但有时候只有某个特定的属性能实现我们的要求，这也就是我们今天要比较它们的原因，有相同点，也有不同点。
首先概况一下，overflow-wrap(word-wrap是overflow-wrap的别名，是旧名称)和word-break很相似，overflow-wrap是通用换行控制工具，而word-break是针对多字节文字的，比如中文、日文、韩文。
overflow-wrap认为单词是文本的基本单位，正常情况下换行时要保护单词的完整。overflow-wrap认为中文这样的多字节语言里单个字是文本的基本单位。换行时可以从单个字之间进行。
word-break一方面可以认为文本的基本单位是单个字(英文里是单个字符)，也就忽略了英文单词的概念，任何地方都可以换行。另一方面可以认为基本单位是单词(单词以空格分割，而中文字之间没有空格，从而，中文句子，只要里面没有空格或标点等，再长的句子都当做一个‘英文单词’)。
white-space是控制文本中的空白和换行符。它可以让换行符不换行，也可以禁止在空白处换行，可以让多个连续的空白合并成一个。
下面看看这个三个属性的可选值：
/* overflow-wrap */
overflow-wrap: normal;
overflow-wrap: break-word;
/* word-break */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* white-space */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
这个三个属性的缺省值都是normal。
现在用实际例子说明。首先是什么属性都不设定，浏览器的缺省表现：
中文从单个字之间换行，英文保留单词的完整性，超出单词会溢出。
当设定为overflow-wrap: break-word;是：
英文保留单词的完整性，但超长单词会中单词中间截断换行。
当设定为word-break: break-all;是：
认为英文文本的最小单位是字符，而不是单词，换行时不保留单词的完整。中文从单个字之间换行。(请注意第一行的换行点，单词and被截断)
当设定为word-break: keep-all;是：
对于英文文本，认为最小单位是单词，换行时保留单词完整性，找空格换行。对中文来说，纯中文句子，再长的句子都不换行，除非遇到空格或非中文字符。
white-space属性的可选值比较多：
normal
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者
元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或者
元素，或者需要为了填充line盒子时才会换行。
pre-line
连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充line盒子时会换行。
下面的表格总结了各种 white-sapce 值的行为：
换行符
空格和制表符
文字转行
normal
合并
合并
转行
nowrap
合并
合并
不转行
pre
保留
保留
不转行
pre-wrap
保留
保留
转行
pre-line
保留
合并
转行
一个实际例子：
