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
- 连续的空白符会被保留。在遇到换行符或者
<br>
元素时才会换行。 pre-wrap
- 连续的空白符会被保留。在遇到换行符或者
<br>
元素,或者需要为了填充line盒子时才会换行。 pre-line
- 连续的空白符会被合并。在遇到换行符或者
<br>
元素,或者需要为了填充line盒子时会换行。
下面的表格总结了各种 white-sapce 值的行为:
换行符 | 空格和制表符 | 文字转行 | |
---|---|---|---|
normal |
合并 | 合并 | 转行 |
nowrap |
合并 | 合并 | 不转行 |
pre |
保留 | 保留 | 不转行 |
pre-wrap |
保留 | 保留 | 转行 |
pre-line |
保留 | 合并 | 转行 |
一个实际例子:
很清晰,学习了~