AI 摘要：本文系统介绍了 CSS 属性 text-wrap 的功能、可选值及其对文本可读性与界面美观度的影响，重点对比了 text-wrap: balance 与 text-wrap: pretty 两种排版策略在不同场景的使用。

1. 属性综述与支持现状
• text-wrap 于 2024 年进入“新增可用”(Newly available) 基线状态，最新版本主流浏览器支持，旧版本不兼容。
• text-wrap 控制文本如何换行，并允许开发者关闭或自定义换行行为。
• 支持的值包括：wrap、nowrap、balance、pretty、stable。

2. 各个属性值解析
• wrap：默认行为，按合理点换行，确保可读性。
• nowrap：禁用换行，文本溢出容器。
• balance：通过调整行长平衡视觉比例，提升排版对称性。
• pretty：避免“孤字行”(orphans)，平衡段落末行排版，Safari 上该属性避免出现“排版河”(typographic rivers)。
• stable：理论上用于编辑文本时防止换行重算，但目前表现与 wrap 一致，不稳定。

3. text-wrap: balance 与 text-wrap: pretty 深度比较
• 共同点：均改善可读性、排版平衡度和视觉流畅性。
• 差异：
• balance 专注行长平衡。
• pretty 注重避免孤字与断词问题，更复杂但视觉自然。
• 性能考量：两者都较为耗费计算资源。
• balance 在 Chrome 中受 6 行限制，Firefox 限 10 行，Safari 不限。
• pretty 性能影响更大但无行数限制。

4. 浏览器兼容与前瞻
• text-wrap: pretty 在当前（2025 年 9 月）仍未被 Firefox 支持，可作为渐进增强使用。
• 新值 text-wrap: avoid-short-last-lines（前称 avoid-orphans）尚无浏览器支持。
• 各浏览器在算法实现上各异，未来或将进一步优化。

5. 应用与实践建议
• 小段文本（标题、卡片内容）适合 balance。
• 段落性文字可尝试 pretty 以优化阅读体验。
• 注意性能评估与浏览器兼容性，可使用 @supports 检测。
• 结合 ch 单位设定文本宽度并不直接影响 text-wrap 效果，但两者可配合。

6. 用户体验与设计意义
• 平衡行长与避免孤字行能显著提升可读性与整体 UI 美感。
• 优化排版对可访问性 (Accessibility) 和可用性 (Usability) 均有积极效果。
• 排版优化是现代前端设计中提升用户体验的重要环节。

LogRocket Blog

When to use CSS text-wrap: balance vs. text-wrap: pretty - LogRocket Blog

Compare and contrast two CSS components, text-wrap: balance and text-wrap: pretty, and discuss their benefits for better UX.