前言

今天来研究一下 CSS 中的文本换行。正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的URL时，文本可能就不会自动换行，而会溢出所在容器。幸运的是，CSS 为我们提供了一些和文本换行相关的属性；

  • overflow-wrap：指定长单词或URL地址的换行规则。
  • word-break：指定单词内断行方式。
  • white-space：指定处理元素中空白（空格、制表符、换行符等）的策略。
  • line-break：过长的标点符号的处理策略。
  • word-spacing：控制单词之间的空格长度。

1. overflow-wrap

overflow-wrap 用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。其属性值有以下三种：

1
2
3
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;

（1）normal

属性值为 normal 将使浏览器使用系统的默认换行行为。因此，对于英语和其他相关书写系统，换行符将出现在空格和连字符处。

图片

从图中可以看出，段落中有一个很长的单词溢出了容器，这是系统的默认换行行为。

（2）anywhere

使用值 anywhere 将在字符串之间的任意点来进行中断，仅当在其行上显示单词会导致溢出时，浏览器才会中断该单词。如果单词放在其行上时仍然溢出，它将在发生溢出的点处中断该单词。

图片

可以看到，使用 overflow-wrap:anywhere 将溢出的单词分解成文本块，这样就可以将其放入容器中。这里文本所在的容器宽度是固定的。

该属性会影响其所在元素的 min-content 属性大小计算。当width设置为min-content时很容易看出来：

1
2
3
4
5
6
7
8
9
.break-word {
  width: min-content;
  overflow-wrap: break-word;
}

.anywhere {
  width: min-content;
  overflow-wrap: anywhere;
}

效果如下：

图片

可以看到，带有overflow-wrap:break-word 的元素计算出的 min-content 就像单词没有被破坏一样，因此它的宽度变成了最长单词的宽度。而带有 overflow-wrap:anywhere 的元素，由于在任何地方都可能发生中断，因此 min-content 最终成为单个字符的宽度。

注意，这种行为只有为文本所在容器的宽度设置为min-content时才会发挥作用，如果宽度设置为固定的值，那么anywhere 和 break-word 的表现是一致的。

（3）break-word

break-word 属性表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

图片

可以看到，文本在长单词的某个地方自动换行了。如果文本所在容器设置了固定的宽度，就会在长单词溢出的地方换行。

（4）浏览器兼容性

overflow-wrap 属性就是原来的word-wrap。word-wrap最初是一个没有前缀的Microsoft扩展。它不是CSS标准的一部分，尽管大多数浏览器都使用word-wrap这个名称来实现它。根据CSS3规范草案，浏览器应将word-wrap视为overflow-wrap属性的遗留名称别名，以确保兼容性。

2. word-break

word-break 属性用于指定怎样在单词内进行断行。我们可以使用该属性在内容发生溢出的确切位置拆分单词并将其换行到下一行。下面是 word-break的属性值：

1
2
3
4
word-break: normal; // 默认断行规则，单词之间自动断行，CJK (CJK 指中文/日文/韩文) 文本按单个字断行。
word-break: break-all; // 对于 non-CJK 文本，可在任意字符间断行。
word-break: keep-all; // CJK 文本不断行。Non-CJK 文本表现同 normal。
word-break: break-word;

需要注意，break-word 属性值已经被弃用，但是由于遗留原因，浏览器仍然支持它。指定该属性与同时使用word-break: normal 和 overflow-wrap: anywhere 的效果是一样的。

下面就来看看前三个属性：

（1）normal

将 word-break 属性的值设置为 normal 将应用默认的断行规则：

图片

可以看到，设置为 normal 时，和不设置word-break时的效果是一样的，这就是浏览器默认的断行行为。

（2）break-all

当属性值为 break-all 时，对于 non-CJK (CJK 指中文/日文/韩文) 的文本，可在任意字符间断行。

图片

可以看到，长单词在溢出的位置将剩余的文本进行了换行。使用 break-all 将在英语和其他相关语言系统中发生溢出的确切位置在两个字符之间断开一个单词。但是，它不会对中文、日文和韩文文本应用相同的行为。因为 CJK 书写系统有自己的应用断点规则。

（3）keep-all

如果使用值 keep-all，即使内容溢出，浏览器也不会将分词应用于 CJK 文本。应用 keep-all 值的效果与非 CJK 书写系统的正常效果相同。简单来说就是，像英语这种 CJK 文本不会断行，像中文这种 Non-CJK 文本表现同 normal。

图片

3. white-space

white-space 指定元素中空白（空格、制表符、换行符等）的处理策略。其属性值如下：

（1）white-space: normal;

连续的空白符会被合并，换行符会被当作空白符来处理。

（2）white-space: nowrap;

和 normal 一样，连续的空白符会被合并。但文本内的换行无效。使用该属性，我们可以防止文本自动换行。

可以看到，这里文本并没有换行，这时文本会在同一行上继续，直到遇到 <br> 标签为止。

（3）white-space: pre;

连续的空白符会被保留。在遇到换行符或者 <br>元素时才会换行。其行为方式类似 HTML 中的 <pre> 标签。

（4）white-space: pre-wrap;

连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充容器时才会换行。

（5）white-space: pre-line;

连续的空白符会被合并。在遇到换行符或者 <br> 元素，或者需要为了填充容器时会换行。

4. line-break

line-break属性可以用来处理如何断开带有标点符号的中文、日文或韩文文本的行。简而言之，该属性可以用来处理过长的标点符号。

（1）anywhere

可以使用 line-break: anywhere 来使长标点符号进行换行：

图片

可以看到，overflow-wrap: break-word 和 line-break:anywhere 能够保持内容被包含在容器内，但是 word-break: break-all 在有长标点符号时就会发生溢出。

5. word-spacing

控制单词之间的空格长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.space1 {
  word-spacing: normal;
}

.space2 {
  word-spacing: 1rem;
}

<div class="space1">
  Hello World，你 好 世 界
</div>
<div class="space2">
  Hello World，你 好 世 界
</div>