---
title: 现代软换行、孤字终结与零 Tracking 铁律
description: "text-wrap: pretty 孤字终结、balance 标题平衡、禁止硬编码换行与正文零 tracking 铁律。"
---

# 现代软换行、孤字终结与零 Tracking 铁律

文本排版的品质体现在最细微的断行与字距处。粗暴的手动换行和随意调整字距是破坏现代界面的隐形杀手。

## 孤字（Orphans）的视觉缺陷

在卡片或弹窗的描述文本中，经常出现最后一行的末尾**孤零零落着一个单字或一个标点**。
这种孤字（Orphan）打破了段落底部的视觉重量平衡，导致右下角出现难看的空洞，极显业余。

## CSS 原生软换行：pretty 与 balance

按 MDN 的兼容数据，`balance` 从 Chrome 114、Firefox 121、Safari 17.5 起可用；`pretty` 从 Chrome 117、Safari 26 起可用，Firefox 尚未支持。不支持的浏览器按普通 `wrap` 断行，不会出错。TuffEx 组件目前没有声明 `text-wrap`；本站文档的页头（DocHero）是这样用的：

:::TuffCodeBlock{lang="scss"}
---
code: |
  // apps/nexus/app/components/docs/DocHero.vue（节选）
  // 标题：让各行宽度尽量接近
  .docs-hero__title {
    text-wrap: balance;
  }

  // 描述段落：避免末行只剩一两个字
  .docs-hero__desc {
    text-wrap: pretty;
  }
---
:::

- `text-wrap: balance`：浏览器计算各行字符分布，生成对称的倒梯形或居中平衡排版；Chrome 只对 6 行以内的文本生效。
- `text-wrap: pretty`：专门检测段末孤字。一旦发现孤字，自动从上一行拉下倒数第二个词合并收尾。

## 严禁硬编码插入换行符

**严禁在动态文案中随意注入 `<br>` 或 `\n`**！
硬换行符将“当前设备宽度的排版”硬编码进了数据流。一旦用户缩放视窗，硬换行符会在意想不到的位置提前断行，造成混乱断裂。一切换行必须交由排版引擎的软换行（Soft Break）算法处理。

## 正文零 Tracking 铁律与特例豁免

顶级字体厂商耗费数年校对字体字偶间距（Kerning Pairs）。在普通正文上声明 `letter-spacing: 1px` 并不会去掉字偶间距，而是在字偶间距之外，给相邻字符之间再统一加 1px，把厂商调好的字距节奏整体冲淡；CSS Text 规范还规定，字距不为 0 时浏览器不应再应用 `fi`、`fl` 这类可选连字。

TuffEx 规定：**正文严禁触碰 `letter-spacing`**。仅允许在以下三种极端场景豁免：
1. **≤11px 全大写微标签**：极小全大写字母需要微扩字距防糊。如 `TxSidebarNav` 分组标题 10.5px、`0.08em`，`TxSelect` 分组标题 11px、`0.06em`，`TxCodeBlock` 语言标签 11px、`0.04em`；`TxTag` 的 11px 标签也留了 `0.05em`。
2. **≥17px 标题与展示数字**：大字号需要微负字距收紧，统一取 `-0.01em`。如 `TxInsightMetric` 数值与 `TxBlowDialog` 标题 17px，`TxModal`、`TxBottomDialog` 标题 18px，`TxStatCard` 数值 28px。
3. **用户头像居中缩写**（`TxAvatar` `0.02em`）：此时字母属于几何图案，非阅读文本。

:::TuffDemoWrapper{demo="ConceptTextWrapDemo"}
:::