Tailwind CSS - 单词断行

Tailwind CSS - 单词断行与文本换行

控制文本如何换行和断行对于创建健壮且可读的布局至关重要。Tailwind 提供了一组工具类来管理单词断行，这对于处理像 URL 或用户生成内容这样长而不可中断的字符串特别有用。

单词断行与换行工具类

以下是用于控制文本流的现代工具类列表，包括经典的 word-break 属性以及用于改进排版的新 text-wrapping 工具类。

类名	CSS 属性	用例
break-normal	overflow-wrap: normal; word-break: normal;	默认浏览器行为。在正常单词断行处（如空格）断开文本。
break-words	overflow-wrap: break-word;	允许长而不可中断的单词换行到下一行，除非必要，否则不会在字符中间断开。
break-all	word-break: break-all;	强制单词在任意字符处断开以防止溢出。可能损害可读性。
break-keep	word-break: keep-all;	防止单词断开。对于 CJK（中文、日文、韩文）语言至关重要，因为单词断开可能会改变含义。
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;	将溢出的单行文本截断并显示省略号 (…)。
text-wrap	text-wrap: wrap;	默认换行行为。与 break-normal 相同。
text-nowrap	text-wrap: nowrap;	防止文本换行到多行。
text-balance	text-wrap: balance;	在多行之间平衡文本以避免孤字。标题的理想选择。
text-pretty	text-wrap: pretty;	改进文本布局以提高可读性，以比 text-balance 更温和的方式防止孤字。正文的理想选择。

示例：处理不同文本场景

此示例演示了每个工具类如何影响受限容器内的文本渲染。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 font-sans">
  <div class="max-w-2xl mx-auto space-y-8">

    <div>
      <h3 class="font-bold mb-2">`break-words` (用于长 URL)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded break-words">
        Check out this link: https://thisisaverylongandunbreakableurlthatwouldotherwiseoverflowitscontainer.com/some/path
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`break-all` (谨慎使用)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded break-all">
        Thisisaverylongandunbreakablewordthatwillbebrokenatanycharacterpoint.
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`truncate` (用于单行)</h3>
      <p class="w-full max-w-xs p-4 bg-white shadow rounded truncate">
        This very long line of text will be truncated with an ellipsis when it overflows its container.
      </p>
    </div>

    <div>
      <h3 class="font-bold mb-2">`text-balance` (用于标题)</h3>
      <h2 class="w-full max-w-xs p-4 bg-white shadow rounded text-2xl font-bold text-center text-balance">
        This heading is perfectly balanced to look great.
      </h2>
    </div>

  </div>
</body>
</html>

最佳实践与可访问性

• 安全起见，使用 break-words： 对于包含用户生成内容的容器，它是防止布局破裂的绝佳选择。
• 标题优先使用 text-balance： 它通过避免出现尴尬的单字行（孤字）来显著改善排版。
• 除非必要，否则避免使用 break-all： 在字符中间断开单词会严重影响可读性。仅在表格中处理长而不带连字符的标识符等情况时作为最后的手段使用它。
• 记住 CJK 语言： 处理中文、日文或韩文内容时，请使用 break-keep 以确保语义正确性。