CSS text-wrap-style怎样让窄屏标题更均衡

窄屏标题最常见的问题不是“文字太多”，而是浏览器的软换行刚好把一个短词或标点挤到最后一行。CSS 的 text-wrap-style 可以改变浏览器选择换行位置的策略：短标题通常使用 balance，较长正文可以考虑 pretty，可编辑区域则更适合 stable。它不会凭空增加容器宽度，也不会替代真正的换行开关。

对两到六行以内的标题，先保证 text-wrap-mode: wrap，再尝试 text-wrap-style: balance；如果元素设置了 nowrap，text-wrap-style 不会产生换行效果。

先确认 text-wrap-style 管的是哪一层

text-wrap-style 只参与“浏览器应该在哪里插入软换行”的选择。它不决定哪些字符之间存在换行机会，也不负责把文字强行拆开。是否允许换行由 text-wrap-mode 控制，二者可以用简写属性 text-wrap 一起声明。

.headline {
  /* 先允许普通软换行，再选择更均衡的断行策略 */
  text-wrap-mode: wrap;
  text-wrap-style: balance;
}

.single-line {
  /* nowrap 会关闭软换行，下面的 style 不再改变布局 */
  text-wrap: nowrap;
  text-wrap-style: balance;
}

nowrap 适合确实不能折行的短标签，但不适合响应式标题。遇到中文、英文长单词或 URL 仍然溢出时，应另外考虑 overflow-wrap、最大宽度和内容改写，而不是继续叠加 text-wrap-style。

短标题优先用 balance

balance 会尝试让多行文本的字符数量更均衡，标题、卡片标题、图片说明和短引用都适合从它开始。浏览器对参与平衡的行数有实现限制，因此它更适合短块文本，而不是一整篇文章。

把复杂配置压缩成一条清晰的发布路径
  
正文仍按普通段落流动，只有标题采用均衡换行。

.card-title {
  /* 标题通常只有少数几行，balance 的计算范围更可控 */
  max-inline-size: 18rem;
  text-wrap: balance;
  margin-block: 0;
}

@supports not (text-wrap-style: balance) {
  .card-title {
    /* 不支持时回到普通 wrap，内容仍然可以阅读 */
    text-wrap: wrap;
  }
}

这里的 @supports 只是能力分支，不代表平衡结果已经被某个浏览器验证。真正的验收重点是：标题仍能在容器中换行、没有依赖固定高度，并且在支持与不支持两种状态下都不会遮挡后续内容。

pretty 和 stable 解决的是另一类问题

pretty 倾向于用更慢的算法换取更好的排版，适合较长的正文，尤其是希望减少孤行时。它不是“比 balance 更高级的标题模式”：标题只需要少量行时，balance 通常更直接；大段文字则应谨慎使用 pretty，避免在频繁变化的布局中增加排版成本。

.article-copy {
  /* 较长正文才考虑排版质量，不能把它当作所有标题的默认值 */
  text-wrap-style: pretty;
}

.comment-editor {
  /* 可编辑文本保持前面已经输入的行，减少光标附近的跳动 */
  text-wrap-style: stable;
}

.comment-editor--fixed {
  /* stable 仍然需要 wrap；nowrap 时它没有可稳定的软换行 */
  text-wrap-mode: wrap;
  text-wrap-style: stable;
}

stable 主要服务 contenteditable 等编辑场景：用户修改当前区域时，前面的行尽量保持稳定。普通展示标题不需要为了“看起来稳定”而使用它。无论选择哪个值，页面都应给文本一个自然的高度，避免用固定高度掩盖换行变化。

兼容处理与常见误区

第一，不要把 text-wrap-style 当作强制断词工具。它只是在已有软换行机会中选择更合适的位置；不可拆分的长串仍需单独处理。第二，不要把 balance 和固定行数绑定，标题内容变化后仍要允许高度自然增长。第三，pretty 的排版收益要和布局成本一起评估，动态列表、实时搜索结果和高频动画区域应优先保持简单。

.responsive-title {
  /* 基础写法即使没有新属性也能保持可读 */
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

@supports (text-wrap-style: balance) {
  .responsive-title {
    /* 支持时改善短标题的行长分布 */
    text-wrap-style: balance;
  }
}

可以把判断浓缩成一张速查表：

相关问题

text-wrap-style: balance 会自动把长单词拆开吗？

不会。它只改变软换行机会之间的选择。长 URL、连续英文或不可拆分标识符仍需结合 overflow-wrap 等属性处理。

为什么设置 balance 后标题仍然没有变化？

先检查元素是否被继承来的 white-space: nowrap 或显式 text-wrap-mode: nowrap 限制，再确认容器确实有可换行的宽度和足够的文本行数。

pretty 能替代 balance 吗？

不能简单替代。短标题优先用 balance，较长正文才考虑 pretty；两者解决的是不同的排版取舍。