文本的布局（尤其是行尾和段落结尾）会影响页面的可读性和美观度。CSS 提供了多种文本换行选项，可改进特定用例。
对于标题等短文本块，请使用 text-wrap: balance。此属性会指示浏览器尽可能均匀地在各行之间分布文本，从而打造更对称的外观。
text-wrap: pretty CSS 属性可让您启用更复杂的换行算法，从而提高正文文本的排版质量。它专门用于防止出现“孤字”（段落最后一行只有一个字词），并为长文本块打造更美观的视觉“不规则边缘”。
实现
1. 识别文本元素：
对于 text-wrap: balance，请选择标题和表头等简短文本块。避免使用具有可见框（例如边框或背景）的元素，因为这可能会在布局中产生意外的视觉空白区域。
对于 text-wrap: pretty，请选择可能包含长文本的元素，因为这些元素最容易出现孤字（孤行）或不当换行。这包括以下元素：
<p><blockquote><li>- 可能包含长文本的其他任何元素。
选择合适的封装方法
| 条件 | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap（默认） |
|---|---|---|---|
| 适用场景 | 短文本块（标题、名称） | 长文本块（段落、列表） | 性能关键型内容 |
| 视觉目标 | 对称的行长度 | 避免孤立行（“孤行”） | 快速、标准的包装 |
| 线路限制 | 最多 6-10 行（算法限制） | 最适合 3 到多条线路 | 无限制 |
| 效果费用 | 高：二分搜索算法 | 中：回溯算法 | 低：标准贪婪算法 |
2. 应用所选的封装：
专门对简短的多行元素（例如标题 [h1-h6]、子标题或引文）应用 text-wrap: balance。
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
使用 text-wrap: pretty 可启用一种优化算法，该算法会评估段落的最后几行，以找到最佳换行点。
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
关键约束条件和性能
text-wrap: balance
- 行数限制：浏览器会限制尝试平衡的行数，以维持性能（Chromium 中通常为 6 行，Firefox 中通常为 10 行）。如果文本超出此限制，浏览器会还原为标准
wrap行为。避免在可能超出这些限制的文本块上使用text-wrap: balance。 - 有针对性地应用：请勿全局应用
text-wrap: balance（例如* { text-wrap: balance; }）。浏览器使用的迭代“二分搜索”算法计算成本很高。仅在特定、简短的文本元素中使用。 - 与宽度的交互：
text-wrap: balance不会改变容器的宽度 (inline-size)，只会影响文本在该宽度内的换行方式。这可能会在容器末尾留出空白，从而影响依赖全宽文本块的布局。
text-wrap: pretty
- 性能与质量：强制性：
text-wrap: pretty的计算开销高于默认的wrap（贪婪）算法，因为它会评估多行（通常是最后四行）以优化换行点。如果您的网页包含大量文本内容，请避免将其全局应用于每个元素。 - 最适合多行文本：
pretty的优势在三行或更多行的段落中最为明显。它对简短的单行文本几乎没有影响。 - 浏览器特有的行为：请注意，实现细节会有所不同。基于 Chromium 的浏览器通常会重点关注最后四行，而其他引擎可能会评估整个段落。
后备策略
在不支持 text-wrap: balance 或 text-wrap: pretty 的浏览器中，该属性会被忽略，文本将使用默认的 wrap 行为进行换行。这是一种渐进增强，可优雅地降级为标准排版。这可确保您的内容在所有浏览器中都清晰可读，同时为支持该功能的浏览器提供更出色的体验。
对于需要精细文本布局的关键布局，请使用 JavaScript 库，但请注意，这可能会很慢并导致性能问题。