CSS 换行控制：`word-break: keep-all` 在 CJK 文本中的禁则处理

各位朋友，大家好。今天我们来深入探讨 CSS 中 word-break 属性，特别是 keep-all 值在处理 CJK（中文、日文、韩文）文本时的行为以及相关的禁则处理。word-break 是一个非常重要的 CSS 属性，它控制着文本在容器中如何换行，对网页的排版和可读性有着直接影响。理解 keep-all 的作用，以及它与 CJK 文本的交互，对于构建美观且易于阅读的多语言网站至关重要。

`word-break` 属性概览

首先，让我们简要回顾一下 word-break 属性的其他常用值，以便更好地理解 keep-all 的独特之处。word-break 属性定义了非 CJK 文本（如英文）在何处可以断行。

normal (默认值): 使用浏览器默认的断行规则。对于英文文本，通常只在空格处断行。
break-all: 允许在单词内的任何字符处断行。这对于防止长单词溢出容器非常有用，但也可能导致单词被强制分割，影响可读性。
keep-all: 对于 CJK 文本，不允许单词内的断行。对于非 CJK 文本，表现与 normal 相同。
break-word: 现在已经被 overflow-wrap: anywhere 代替，效果基本一致。允许在单词内的任何字符处断行，即使正常情况下不会断行。

`word-break: keep-all` 的核心作用

word-break: keep-all 的核心作用在于 阻止 CJK 文本在字符级别上的断行。这意味着，除非遇到空格、标点符号或其他允许断行的字符，否则 CJK 文本将被视为一个整体，不会被分割到下一行。

例如，考虑以下 HTML 和 CSS：

<!DOCTYPE html>
<html>
<head>
<title>word-break: keep-all example</title>
<style>
.container {
  width: 200px;
  border: 1px solid black;
  word-break: keep-all;
}
</style>
</head>
<body>
<div class="container">
  这是一个测试用的中文句子。This is an English sentence for testing.
</div>
</body>
</html>

在这个例子中，中文句子 "这是一个测试用的中文句子" 将被视为一个整体，不会在任何字符处断行。如果整个句子无法容纳在容器的宽度内，它将整体移动到下一行。而英文句子 "This is an English sentence for testing." 则会按照 normal 规则断行，即在空格处断行。

CJK 禁则处理

word-break: keep-all 与 CJK 禁则处理密切相关。禁则处理 是一套排版规则，用于避免在行首或行尾出现某些特定的字符，以提高文本的可读性和美观性。这些字符通常包括标点符号、括号、引号等。

word-break: keep-all 本身并不直接处理禁则，但它与禁则处理相互作用。因为 keep-all 阻止了字符级别的断行，所以当一个包含需要禁则处理的字符的 CJK 文本块无法完全容纳在当前行时，整个文本块可能会被推到下一行，从而避免了违背禁则规则。

常见的 CJK 禁则规则可以分为以下几类：

行头禁则 (Kinsoku Shori at Line Start): 禁止出现在行首的字符，例如句号 (。)、逗号 (，)、顿号 (、)、右括号 (）)、右引号 (”’) 等。
行尾禁则 (Kinsoku Shori at Line End): 禁止出现在行尾的字符，例如左括号 (（)、左引号 (“‘) 等。
分离禁止 (Line Breaking Restriction): 禁止某些字符组合被分割到不同的行，例如中文书名号 (《》) 必须成对出现，不能被分割。

text-wrap: balance 与禁则处理的增强

CSS Text Module Level 4 引入了 text-wrap: balance 属性，它可以尝试使多行文本的长度更加平衡，从而间接地改善禁则处理的效果。balance 值会尽量避免出现孤立的单词或短语出现在最后一行，这有助于减少违反禁则规则的情况。

以下示例展示了 text-wrap: balance 的作用：

<!DOCTYPE html>
<html>
<head>
<title>text-wrap: balance example</title>
<style>
.container {
  width: 300px;
  border: 1px solid black;
  text-wrap: balance;
  word-break: keep-all; /* 确保 CJK 文本不被分割 */
}
</style>
</head>
<body>
<div class="container">
  这是一个比较长的中文句子，用来测试 text-wrap: balance 的效果。This is a longer English sentence to test the effect of text-wrap: balance.
</div>
</body>
</html>

在这个例子中，text-wrap: balance 会尝试使中文句子和英文句子在容器中更均匀地分布，从而减少最后一行出现单个单词的可能性，间接提高了禁则处理的效果。

`word-break: keep-all` 的实际应用场景

word-break: keep-all 在许多场景中都非常有用，尤其是在需要保持 CJK 文本的完整性和可读性的情况下。

标题和导航菜单: 在标题和导航菜单中使用 keep-all 可以防止标题或菜单项被意外分割，保持视觉一致性。
产品名称和品牌名称: 对于包含 CJK 字符的产品名称或品牌名称，使用 keep-all 可以确保名称完整显示，避免造成混淆。
代码片段: 在显示包含 CJK 字符的代码片段时，使用 keep-all 可以防止代码被错误地分割，影响代码的可读性和可执行性。
表格数据: 在表格中显示 CJK 数据时，使用 keep-all 可以确保数据完整显示，避免数据被分割到不同的行。

代码示例：表格中的 keep-all 应用

<!DOCTYPE html>
<html>
<head>
<title>word-break: keep-all in table</title>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
.keep-all {
  word-break: keep-all;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="keep-all">超级无敌好用的产品</td>
      <td>199 元</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="keep-all">The Best Product Ever</td>
      <td>$99</td>
    </tr>
  </tbody>
</table>

</body>
</html>

在这个例子中，keep-all 类被应用于 "产品名称" 列的单元格。这将确保中文产品名称 "超级无敌好用的产品" 不会被分割到不同的行，即使单元格的宽度有限。

`word-break: keep-all` 的局限性

虽然 word-break: keep-all 在许多情况下都很有用，但它也有一些局限性。

长文本溢出: 如果 CJK 文本块太长，无法容纳在容器的宽度内，即使使用了 keep-all，文本仍然会溢出容器。在这种情况下，可以考虑使用 overflow: hidden 或 overflow: scroll 来处理溢出。
与 white-space 的冲突: word-break 属性与 white-space 属性可能会发生冲突。如果 white-space 设置为 nowrap，则文本将不会换行，即使使用了 word-break: keep-all。
对非 CJK 文本的影响: word-break: keep-all 对非 CJK 文本的影响与 word-break: normal 相同，这意味着英文文本仍然会在空格处断行。

代码示例： white-space: nowrap 的影响

<!DOCTYPE html>
<html>
<head>
<title>word-break and white-space conflict</title>
<style>
.container {
  width: 200px;
  border: 1px solid black;
  word-break: keep-all;
  white-space: nowrap; /* 禁止换行 */
}
</style>
</head>
<body>
<div class="container">
  这是一个测试用的中文句子。This is an English sentence for testing.
</div>
</body>
</html>

在这个例子中，由于 white-space: nowrap 的存在，容器中的文本将不会换行，即使使用了 word-break: keep-all。中文句子和英文句子都会超出容器的宽度。

浏览器兼容性

word-break 属性具有良好的浏览器兼容性。所有主流浏览器都支持 word-break 属性，包括 Chrome, Firefox, Safari, Edge 和 Internet Explorer (IE)。

以下表格总结了 word-break 属性的浏览器兼容性：

浏览器	版本	支持情况
Chrome	All	支持
Firefox	All	支持
Safari	All	支持
Edge	All	支持
Internet Explorer	5.5+	支持

最佳实践

在使用 word-break: keep-all 时，可以遵循以下最佳实践：

明确目标： 在使用 keep-all 之前，明确你的目标是阻止 CJK 文本在字符级别上的断行，并且理解其可能带来的影响。
考虑容器宽度： 确保容器的宽度足够容纳 CJK 文本块，避免文本溢出。
避免与 white-space: nowrap 冲突： 如果需要换行，不要使用 white-space: nowrap。
结合 text-wrap: balance： 使用 text-wrap: balance 可以改善文本的平衡性，间接提高禁则处理的效果。
进行测试： 在不同的浏览器和设备上测试你的网页，确保 word-break: keep-all 的效果符合预期。

总结

word-break: keep-all 是一个强大的 CSS 属性，可以有效地控制 CJK 文本的换行行为。通过阻止字符级别的断行，keep-all 可以保持 CJK 文本的完整性和可读性，并与禁则处理规则相互配合，提升网页的整体排版质量。理解 keep-all 的作用、局限性和最佳实践，可以帮助你构建更美观、更易于阅读的多语言网站。

希望今天的分享对大家有所帮助。感谢各位的聆听。

更多IT精英技术系列讲座，到智猿学院