CSS text-wrap 文本换行控制
text-wrap属性：balance平衡换行（标题美观）、pretty避免孤行、wrap/nowrap、overflow-wrap/word-break/hyphens连字符、中文换行规则line-break · 难度：入门 · +10XP
CSS text-wrap —— 让标题自动平衡换行
你有没有手动在标题中加 br 标签来让换行更好看？现在不用了。CSS的 text-wrap: balance 会自动计算最佳换行位置，让每行字数尽量平均。
基本用法
h1, h2, h3 {
text-wrap: balance; /* 自动平衡换行 */
}text-wrap 四个值对比
| 值 | 效果 | 适用 |
|---|---|---|
| wrap | 默认换行 | 一般场景 |
| nowrap | 不换行 | 短标签 |
| balance | 每行字数均衡 | 标题、引言 |
| pretty | 避免孤行（最后一行只有一个字） | 正文段落 |
注意：balance只对4-6行以内的文字有效，长段落用pretty。
动手练习
- 基础练习：找一个标题较长的页面，给所有h1-h3加text-wrap:balance，观察换行变化。
- 进阶应用：做文章阅读页——标题用balance、正文用pretty、代码块用nowrap横向滚动。
- 项目实战：检查项目中所有标题，统一加balance。对比改动前后截图。