TYPOGRAPHY
平衡换行Balanced & Pretty Text Wrap
text-wrap:balance 让标题两行一样长；pretty 消灭正文最后一行孤字。
效果预览
这是一个没有做平衡换行的标题它断得很难看
这是做了 balance 的标题两行长度刚刚好 ✓
正文用 text-wrap:pretty 可以避免最后一行只剩一两个字，段落的收尾会自然很多。
适合用在哪
所有标题和正文。一行 CSS，观感立刻专业。
容易踩的坑
- 对长段落也加 text-wrap:balance，浏览器只对 6 行以内生效，且会拖慢排版计算。
- balance 会缩短每行宽度，标题配背景色块时右侧留出明显空白。
- 旧浏览器不支持时未检查降级效果，关键标题仍可能出现一字孤行。
设计提示词 · Prompt
平衡换行（Balanced & Pretty Text Wrap）：标题加 text-wrap:balance——浏览器自动断成两行等长，告别"第——一行特长第二行一个字"的尴尬；正文加 text-wrap:pretty——避免段落最后一行只剩一两个字（孤行/寡字）。配合中文还可以用 line-break 和 word-break 控制标点悬挂。这是 2024+ 浏览器原生能力，零成本提升排版质感，写进全站基础样式。别用 JS 手动插 <br> 模拟了——原生方案自适应任何视口。
Balanced & Pretty Text Wrap: add text-wrap:balance to headings — the browser automatically breaks them into two equal-length lines, ending the awkwardness of "a very long first line and a single word on the second"; add text-wrap:pretty to body text — preventing the last line of a paragraph from holding just one or two words (orphans/widows). For Chinese, line-break and word-break can additionally control hanging punctuation. This is a native 2024+ browser capability that improves typographic quality at zero cost; write it into your site-wide base styles. Stop manually inserting <br> with JS to simulate it — the native solution adapts to any viewport.
常见搭配
同一页面里经常和「平衡换行」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-balanced"> <h4>这是一个没有做平衡换行的标题它断得很难看</h4> <h4 class="balanced">这是做了 balance 的标题两行长度刚刚好 ✓</h4> <p class="pretty">正文用 text-wrap:pretty 可以避免最后一行只剩一两个字，段落的收尾会自然很多。</p> </div>