white-space、word-break、word-wrap、overflow-wrap的区别与联系

1. white-space

white-space用于指定浏览器如何处理元素文本中的空格、制表符和换行符，以及指定当元素内文本到达容器末尾即将溢出容器时，是否发生自动换行。
white-space的可取值有：

• normal（默认值）：文本中连续的空格、制表符将被统一替换成一个空格（Collapse），换行符不发生换行，转而替换成一个空格（Collapse），当文本到达容器末尾时，自动换行（Wrap）。
• nowrap：文本中连续的空格、制表符将被统一替换成一个空格（Collapse），换行符不发生换行，转而替换成一个空格（Collapse），当文本到达容器末尾时，不换行（No wrap）。
• pre：文本中的连续空格、制表符被保留（Preserve），换行符发生换行（Preserve），当文本到达容器末尾时，不换行（No wrap）。
• pre-wrap：文本中的连续空格、制表符被保留（Preserve），换行符发生换行（Preserve），当文本到达容器末尾时，自动换行（Wrap）。
• pre-line：文本中连续的空格、制表符将被统一替换成一个空格（Collapse），换行符发生换行（Preserve），当文本到达容器末尾时，自动换行（Wrap）。

将以上属性值的特点绘制成图表如下：

white-space属性值

关于以上属性的具体表现，可参考：mdn white-space.

2. word-break

word-break属性用于指定当文本到达容器末尾需要自动换行时，文本的分割方式（即确定换行结点）。
word-break的可取值有：

• normal（默认值）：若在当前单词的基础上添加下一个单词后会溢出容器，则在当前单词的末尾处进行换行（下一个单词放置在第二行，此时每个单词视作一个整体，不可分割）。
• break-all：将文本分割成最小单位，即对于英文单词，分割成单个字母，对于CJK（Chinese/Japanese/Korean），分割成单字，连续排列，在容器末尾处换行。
• keep-all：对于英文文本，表现为normal，对于CJK文本，连续的多个字作为一个整体（不可分割），只有在空格处才会发生换行。
• break-word：在normal的基础上，若一行中只有一个单词，且该单词的长度超出了容器宽度，则该单词会在容器末尾处发生分割来进行换行。

关于以上属性的具体表现，可参考：mdn word-break.

3. word-wrap

word-wrap的可取值为：

• normal（默认值）
• break-word

word-wrap: break-word与word-break: break-word作用相同，不过对于Edg、Firefox、IE浏览器，不支持word-break: break-word，此时只能用word-wrap: break-word。

4. overflow-wrap

overflow-wrap的可取值为：

• normal（默认值）
• break-word

overflow-wrap与word-wrap的作用相同，其实overflow-wrap就是word-wrap经过重命名而来，不过对于一些浏览器还暂不支持该属性，此时只能用word-wrap。