html5 break word,overflow-wrap(word-wrap)、word-break和white-space的换行效果对比

之所以将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

保留

合并

转行

一个实际例子：