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 保留 合并 转行

一个实际例子:

阅读余下内容
 

一条回应:“overflow-wrap(word-wrap)、word-break和white-space的换行效果对比”

发表评论

电子邮件地址不会被公开。 必填项已用*标注