27. 文本换行与空白处理

本节目标：掌握文本换行和空白处理的各种场景，能正确处理长 URL、连续空格、文字截断等常见问题。

文本换行看起来简单，实际项目中经常遇到各种坑——长 URL 溢出、连续空格丢失、表格文字撑破布局。

whitespace：空白处理

whitespace-* 控制元素内空白字符的处理方式：

类名	效果
`whitespace-normal`	合并空格，自动换行（默认）
`whitespace-nowrap`	合并空格，不换行
`whitespace-pre`	保留空格和换行（像 `<pre>`）
`whitespace-pre-line`	合并空格，保留换行
`whitespace-pre-wrap`	保留空格和换行，允许自动换行
`whitespace-break-spaces`	保留空格和换行，行尾空格也会换行

<!-- 不换行 -->
<p class="whitespace-nowrap">这段文字不会换行，会溢出容器</p>

<!-- 保留格式 -->
<p class="whitespace-pre">
  保留  所有  空格
  和换行
</p>

<!-- 保留换行但合并空格 -->
<p class="whitespace-pre-line">
  第一行
  第二行
</p>

Tip

whitespace-nowrap 经常和 truncate 一起用——不换行 + 截断 = 单行省略号效果。

text-overflow：文字截断

单行截断：truncate

truncate 是最常用的文字截断类，一行内超出显示省略号：

<p class="truncate w-48">
  很长很长很长很长很长很长很长很长很长的文字会被截断
</p>

它等价于：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行截断：line-clamp-*

v4 支持 line-clamp-* 控制截断行数：

<!-- 超过 2 行就截断 -->
<p class="line-clamp-2 w-64">
  很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字...
</p>

<!-- 超过 3 行就截断 -->
<p class="line-clamp-3 w-64">
  很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字...
</p>

line-clamp-1 到 line-clamp-6 都有，还有 line-clamp-none 取消截断。

Note

line-clamp 需要 -webkit-line-clamp 属性，所有现代浏览器都支持。v4 已经帮你处理了浏览器前缀。

overflow-wrap：溢出换行

控制当一个单词太长、容器放不下时，是否允许在单词内部断行：

类名	效果
`break-normal`	默认行为，只在允许的断点换行
`break-words`	允许在单词内部断行
`break-all`	任何字符后都可以断行
`break-keep`	针对 CJK 文本优化（v4 新增）

<!-- 长 URL 不会溢出 -->
<p class="break-words w-48">
  https://example.com/very/long/path/to/some/resource
</p>

<!-- 中文可以在任意位置断行 -->
<p class="break-keep w-48">
  这是一段很长的中文文字可以在任意位置断行
</p>

Tip

处理用户输入的长 URL 或长单词时，break-words 是必备工具。否则长 URL 会撑破容器。

word-break：单词断行

跟 overflow-wrap 类似但行为略有不同：

类名	效果
`break-normal`	默认
`break-words`	同 overflow-wrap 的 break-words
`break-all`	任意位置断行

实际使用中，overflow-wrap: break-word 和 word-break: break-all 的区别：

break-words → 先尝试正常换行，实在不行才在单词内断
break-all → 直接在容器边界处断，不管单词完整性

<!-- 优先保持单词完整 -->
<p class="break-words w-32">Supercalifragilisticexpialidocious</p>

<!-- 直接截断 -->
<p class="break-all w-32">Supercalifragilisticexpialidocious</p>

hyphens：连字符

hyphens-* 控制是否在断行时自动添加连字符：

类名	效果
`hyphens-none`	不添加连字符
`hyphens-manual`	只在 `` 处断行
`hyphens-auto`	自动添加连字符（需要 lang 属性）

<p class="hyphens-auto break-words w-48" lang="en">
  Extraordinary extraordinary extraordinary
</p>

Note

hyphens-auto 需要 HTML 元素有正确的 lang 属性，否则不会生效。中文排版一般不需要连字符。

实际应用：表格文字截断

<div class="overflow-x-auto">
  <table class="min-w-full">
    <thead>
      <tr>
        <th class="px-4 py-2 text-left">标题</th>
        <th class="px-4 py-2 text-left">描述</th>
        <th class="px-4 py-2 text-left">链接</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-4 py-2 font-medium">项目 A</td>
        <td class="px-4 py-2 max-w-xs">
          <p class="line-clamp-2">
            这是一段很长的描述文字，超过两行就会被截断显示省略号...
          </p>
        </td>
        <td class="px-4 py-2">
          <p class="truncate max-w-[200px] text-blue-500">
            https://example.com/very/long/url/path
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

实际应用：卡片标题截断

<div class="p-4 bg-white rounded-lg shadow w-64">
  <h3 class="font-semibold truncate">
    标题太长会被截断显示省略号
  </h3>
  <p class="text-sm text-gray-600 line-clamp-3 mt-2">
    描述文字超过三行就会被截断。这是一段很长的描述文字，用来演示多行截断的效果...
  </p>
</div>

本节小结

whitespace-nowrap / whitespace-pre → 空白处理
truncate → 单行截断（省略号）
line-clamp-{n} → 多行截断
break-words → 允许单词内断行
break-all → 任意位置断行
hyphens-auto → 自动连字符