引言

text-wrap: pretty是 CSS Text Module Level 4 规范中引入的文本换行优化属性，旨在通过智能算法提升多行文本的排版质量，尤其针对传统网页排版中的痛点问题。

本文从核心原理、跨浏览器实现差异、适用场景、实践技巧、与其他换行属性对及移动端窄屏环境等多个维度，对其展开详细解析。

一、核心技术原理

text-wrap: pretty的核心是段落级多行联动优化算法，与传统单行换行（text-wrap: wrap）相比，它通过评估整个段落动态调整换行策略，解决以下问题：

• 孤行孤字（Orphans）：避免段落末行仅剩单个单词或汉字，破坏阅读连续性。
• 锯齿状文本边缘（Ragged Edges）：减少因行尾单词长度差异导致的参差边缘，使文本块视觉更整齐。
• 连字符滥用（Excessive Hyphenation）：智能控制连字符使用，避免连续多行以连字符结尾。
• 排版河流（Rivers of White）：防止单词间距在垂直方向对齐形成视觉空白带。

算法机制：

• 全局评估：分析段落所有行的长度、单词断点、连字符位置。
• 动态权重调整：根据行间距、断词优先级等参数动态决策最优换行点。

视觉平衡模型：模拟专业排版师的决策逻辑，优化文本块整体形态。

二、跨浏览器实现差异与兼容性

不同浏览器引擎对 text-wrap: pretty的实现策略存在显著差异：

兼容性现状（截至2025年8月）：

• 支持：Safari TP 216+、Chrome 117+、Edge 177+、Firefox 120+（部分优化）。
• 回退方案：

p {
  text-wrap: balance; /* 基础回退（标题优化） */
  text-wrap: pretty;  /* 渐进增强 */
}
@supports not (text-wrap: pretty) {
  p { overflow-wrap: break-word; } /* 确保长单词换行 */
}

三、核心适用场景

3.1 正文段落优化

适用于博客、新闻等长文本，显著提升可读性：

.article {
  text-wrap: pretty;
  max-width: 65ch;   /* 最佳阅读宽度 */
  line-height: 1.6;
  text-align: left;  /* 避免两端对齐产生空白河流 */
}

效果：减少末行孤字，优化文本边缘平滑度。

3.2 移动端窄屏适配

解决窄容器中易出现的排版问题：

@media (max-width: 480px) {
  .card {
    text-wrap: pretty;
    hyphens: auto;    /* 辅助长单词断词 */
    font-size: 0.9rem;/* 缩小字号增加换行灵活性 */
  }
}

技巧：容器宽度建议限制在 30-50ch，避免过宽削弱优化效果。

3.3 多语言混合排版

优化非拉丁语系（如中文、阿拉伯语）的断行：

:lang(zh) {
  text-wrap: pretty; /* 避免汉字被截断 */
  line-break: loose; /* 宽松换行规则 */
}

注意：中英文混排时，hyphens: auto对中文无效，需依赖 pretty的智能断行。

3.4 高质印刷级排版

电子书、设计文档等场景的进阶组合：

.ebook {
  text-wrap: pretty;
  font-kerning: normal;  /* 启用字距调整 */
  hanging-punctuation: allow-end; /* 标点悬挂 */
}

四、性能优化与避坑指南

4.1 长文本分段处理

超长内容（>500行）需分割为多个 <section>，仅对可视区域启用优化：

document.querySelectorAll('section').forEach(section => {
  if (isInViewport(section)) section.style.textWrap = 'pretty';
});

4.2 避免动画中的动态重排

对频繁变化的文本（如计数器）禁用 pretty，改用 text-wrap: stable。

4.3 浏览器特性检测

通过 @supports隔离样式调整，避免兼容性问题：

@supports (text-wrap: pretty) {
  .content { line-height: 1.8; } /* 优化后需增大行高 */
}

五、对比其他换行属性

5.1 对比 text-wrap: wrap

5.1.1 核心异同对比

5.1.2 小结

优先使用 text-wrap: pretty 的场景为：多行正文段落、多语言内容、窄容器响应式布局及高质排版需求；保留 text-wrap: wrap 于性能敏感内容或兼容旧浏览器。实践中建议渐进增强并测试实际渲染效果。

5.2 对比其他

决策建议：

• 正文段落：优先 pretty（全局优化）
• 标题/短文本：balance（视觉平衡）
• 动态内容：stable（稳定性优先）

六、移动端窄屏环境

在移动端窄屏环境下，text-wrap: pretty通过智能优化段落换行策略提升文本可读性，尤其针对窄屏易出现的“孤行孤字”（末行孤立单词/汉字）、连字符堆积等问题。以下是具体优化技巧及实践示例：

6.1 核心优化目标与窄屏痛点

1、避免“孤行孤字”

窄屏下段落末行易出现单个单词或汉字，破坏阅读连续性。text-wrap: pretty自动调整换行位置，确保末行至少包含2个以上单词/汉字

2、减少锯齿边缘

窄容器中文本边缘参差更明显，该属性通过多行联动优化，使文本块视觉更整齐。

3、智能处理连字符

避免连续多行以连字符结尾，减少视觉干扰。

6.2 关键优化技巧

6.2.1 基础配置：容器宽度与段落长度

/* 容器宽度适配窄屏（建议30-50字符宽度） */
.mobile-container {
  max-width: 95%;       /* 避免溢出 */
  text-wrap: pretty;    /* 启用优化 */
}

说明：窄屏下过宽容器会削弱 pretty效果，需限制 max-width（如 35ch）。

6.2.2 处理长单词与复合词

p {
  text-wrap: pretty;
  overflow-wrap: break-word;  /* 强制长单词换行 */
  hyphens: auto;             /* 连字符辅助断词 */
}

场景：英文长单词（如 supercalifragilisticexpialidocious）在窄屏易溢出容器，需搭配 overflow-wrap和连字符。

6.2.3 响应式字体与行高调整

@media (max-width: 480px) {
  p {
    font-size: 0.9rem;     /* 窄屏缩小字号 */
    line-height: 1.7;      /* 增加行高提升可读性 */
    text-wrap: pretty;
  }
}

效果：字号减小后换行点增多，pretty可更灵活优化行尾。

6.2.4 避免短段落末行问题

<!-- 避免单行段落（窄屏易触发孤字） -->
<p>This is a short paragraph.</p> <!-- 可能末行仅 "paragraph." -->
<!-- 建议合并相邻短文本 -->
<p>This is a short paragraph followed by another sentence.</p>

原理：短段落末行单词少，pretty优化空间有限，需人工合并内容。

6.3 进阶实践：与其他属性协同

兼容性回退示例：

p {
  text-wrap: balance; /* 基础回退（支持标题优化） */
}
@supports (text-wrap: pretty) {
  p {
    text-wrap: pretty; /* 渐进增强 */
    line-height: 1.8;  /* 优化后调整行高 */
  }
}

6.4 注意事项

• 性能限制：超长文本（如千行）可能影响渲染，建议分段落使用。
• 浏览器差异：

• Chrome：仅优化末4行（重点防短末行）
• Safari：全局段落优化（效果更全面）

• 备用方案：若需兼容旧浏览器，可用 text-wrap: balance（标题） + overflow-wrap: break-word（正文）。

结语

text-wrap: pretty代表了网页排版向印刷级质感的跨越，其价值在多行正文、窄屏响应式及多语言场景尤为突出。实践中需结合渐进增强、分段加载及浏览器差异策略，方能最大化发挥其优化潜力。可通过 WebKit 官方演示直观体验效果差异。