零宽度空格与 CSS 换行行为

11月 22, 2024

注意：此文章已超过 1 年未更新，部分信息可能已经过时。

在解决 Tags 页面行尾词语被迫换行的问题时，发现   并不能强制连接字符，于是调查发现，还有零宽度空格这一概念。在 HTML 中，如果你需要一个既不会占用额外空间，又能用作连接的字符，可以使用零宽度符号，它们也是一种 HTML 实体（HTML Entities）。

零宽度符号#

1. 零宽度空格（Zero-Width Space）#

• HTML 实体：​ 或 ​
• 特性：零宽度空格是一种看不见的字符，它不会显示任何额外的间距，可以插入在文本或标签中。
• 用法：

  Hello​World

  或：

  Hello​World

  效果：看起来是 HelloWorld，但这些单词之间实际有一个零宽度空格。

2. 零宽度非连接符（Zero-Width Non-Joiner, ZWNJ）#

• HTML 实体：‌ 或 ‌
• 特性：主要用于在某些拼写格式中禁止字符的合并显示，通常在阿拉伯语、波斯语或南亚语言中使用，但在普通文本中也可以充当一个零宽度连接效果。
• 用法：

  Hello‌World

3. 零宽度连接符（Zero-Width Joiner, ZWJ）#

• HTML 实体：‍ 或 ‍
• 特性：用于将两个字符“连接”在一起，影响它们的呈现方式，主要用于连写字符展示，但在普通文本中也可以用作零宽度符号。
• 用法：

  Hello‍World

零宽度符与 CSS 集成使用#

在 CSS 中，word-break 和 white-space 等属性直接影响文字如何在页面上换行和中断，而零宽字符（如零宽度空格 ​）会与这些属性产生交互。以下是它们之间的关系和效果：

1. word-break#

word-break 定义非单词边界文本的断行规则，主要用于处理长单词或连续的字符（如没有空格的长文本）的断行方式。选项包括：

1. normal（默认）

   • 默认行为，遵循浏览器的语言规则。
   • 单词只会在自然断点（如空格或连字符 -）处换行。
   • 若插入了零宽度空格（​），浏览器会将其视为一个断点，允许在此处换行，即使单词本身没有其他断点。

   示例：

   <!-- CSS -->
   <style>
       p { word-break: normal; }
   </style>
   <!-- HTML -->
   <p>SuperLongWordWithoutBreak&#8203;AnotherWord</p>

   效果：SuperLongWordWithoutBreak 会在 ​ 处换行。

2. break-word

   • 单词过长时会强制在下一个可用位置（如字符之间）断行。
   • 零宽度空格会生效，但即使没有 ​，单词也可能在任意字符处断开。

   示例：

   <style>
     p { word-break: break-word; }
   </style>
   <p>SuperLongWordWithoutBreak&#8203;AnotherWord</p>

   效果：如果单词长度超出容器宽度，即使没有 ​，SuperLongWordWithoutBreak 也会被断开，例如：SuperLongWord 会被拆掉一部分到下一行。

3. break-all

   • 强制在任何字符之间断行，无论是否为单词边界。
   • 零宽度空格会被忽略，因为 break-all 不需要依赖额外的换行提示符。

   示例：

   <style>
     p { word-break: break-all; }
   </style>
   <p>SuperLongWordWithoutBreak&#8203;AnotherWord</p>

   效果：所有字符都可以随意断行，SuperLongWordWithoutBreak 会被拆分成多行，无需依赖 ​。

4. keep-all

   • 禁止在单词中间断行，适用于像中文或韩文这样的语言，确保连续文字块或非拉丁字符不会被拆分。
   • 在这种情况下，​ 会显式生效，成为少数允许的断点之一。

   示例：

   <style>
     p { word-break: keep-all; }
   </style>
   <p>SuperLongWordWithoutBreak&#8203;AnotherWord</p>

   效果：整个 SuperLongWordWithoutBreakAnotherWord 将保持不被拆分，但会在 ​ 处允许换行。

总结，零宽字符在不同的 word-break 设置下可以表现不同：

2. white-space#

white-space 定义了空白字符（如空格、换行符）如何保留和处理，与文本的断行逻辑高度相关。它比 word-break 和 overflow-wrap 更全面，因为它不仅控制断行，还控制空白字符的处理。

可选值：

• normal（默认值）

  • 连续空格会被压缩成一个空格。
  • 允许文本根据容器宽度自动换行。

• nowrap

  • 禁止文本换行，单行显示，超出容器的文本会溢出。
  • 适用于需要完全靠 overflow 属性来控制文本的显示和截断。

• pre

  • 保留空格和换行符。
  • 文本不会自动换行（类似于 nowrap），常用于代码块等需要显示原始格式的内容。

• pre-wrap

  • 保留原始空格和换行符，同时允许文本在必要时换行。
  • 适用场景：需要同时保留空格和换行符，并适应容器宽度。

• pre-line

  • 把多余的空格压缩成一个，但保留换行符。
  • 类似于 normal 的文本行为，只是保留了手动换行符。

3. overflow-wrap#

overflow-wrap（以前叫 word-wrap）定义单词在容器溢出时是否可以强制断行，也就是当单词太长导致溢出时如何处理。

可选值：

• normal（默认值）：

  • 长单词不会被断开，超出容器宽度时自然溢出容器。

• break-word

  • 允许在超过容器宽度的单词内部断行。
  • 适用场景：主要用于避免长单词（如 URL 或连续字符）导致的容器溢出问题。

在 CSS 中，word-break、white-space 和 overflow-wrap 都是控制文本如何断行和显示的重要属性，但它们的主要功能和侧重点有所不同。以下是这三个属性的详细对比，以及它们之间的区别和联系：

主要区别#

关系与交互#

• white-space 是基础：

  • 它决定了文本是否可以换行，以及如何处理空格和换行符。如果 white-space 设置为 nowrap 或 pre，不论 word-break 或 overflow-wrap 的设置如何，文本都无法换行。

• word-break 和 overflow-wrap 的区别：

  • word-break 涉及文本断行的优先级更高，影响包括单词边界以及字符范围，而 overflow-wrap 仅在文本不能自然断行、出现溢出时才起作用。
  • 通常情况下，overflow-wrap 是更温和的设置，只会在内容溢出时提供断行，而 word-break: break-all 是一种强制性的设置。

• 联合使用：

  • 当处理容器内长文本时，可以组合使用：

    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;

    这样可以确保文本在正常情况下换行，同时处理长单词溢出的问题。

选择属性的场景总结#

1. 如果主要是控制长单词或连续字符的断行行为，优先使用：

   • overflow-wrap: break-word
   • 或 word-break: break-word/break-all

2. 如果需要控制文本格式（如空格和换行）以及是否允许换行，使用：

   • white-space: normal/pre/pre-wrap 等。

3. 当需要支持中文断行时，比如在字符级断行场景下，可以使用：

   • word-break: break-all

通过合理搭配这些属性，可以满足几乎所有的文本换行和格式控制需求。

总结#

• 零宽字符（如 ​）和 CSS 的换行行为强相关：
  • 在 normal 或 keep-all 情况下，零宽字符是添加换行点的显式工具。
  • 在 break-word 或 break-all 的情况下，即使没有零宽字符，浏览器也会强制断行，但 ​ 仍优先作为一个换行点。
• 可以根据需求，在需要“隐式换行”的位置插入零宽字符，并利用 CSS 来控制文本的换行方式。
• 如果你想插入不占用任何空间的非连接符，最常用的是 零宽度空格（​ 或 ​）。
• 具体用哪个取决于你的需求，但 ​ 在语言中没有特殊行为，更通用。
• 如果希望强制连接默认会分割的换行点，请尝试使用 ‍ 零宽度连接符。

注意：零宽度字符通常是不可见的，但它可能会影响搜索、字符串分割或者其他基于文本的操作，因此在使用时要小心。