text-wrap: balance 在短段落无效，因浏览器仅在明确多行且行长差异显著时触发；需满足 max-width、足够字数、无干扰属性等硬性条件，否则退化为默认换行。
text-wrap: balance 在短段落上为什么没反应
不是写法错，是浏览器压根没触发平衡逻辑。它只在「明确有多行 + 行长差异显著」时才介入，而短段落（比如 20–60 字、2–3 行）常被渲染成单行，或换行点太少，算法无从优化。
常见错误现象：text-wrap: balance 写了但文字完全没变化；DevTools 里该属性显示为灰色（invalid value）；在 Safari / Firefox 打开直接忽略。
- 容器没设
max-width或固定宽度 → 文本撑满，无换行空间 - 内容太短、字号太大、视口太宽 → 强制不出 ≥2 行
- 中文短句无空格分隔 → 浏览器难识别合法断点（如“前端性能优化”不如“Frontend Performance Optimization”易平衡）
- 同时用了
white-space: nowrap、overflow-wrap: anywhere或text-align: center→ 平衡逻辑被跳过
Chrome 120+ 中让 balance 真正生效的硬性条件
想在 Chrome/Edge 最新版看到效果，必须同时满足以下几点，缺一不可：
- 容器设了明确的
max-width（例如max-width: 280px），不能靠父级flex/grid自动收缩 - 文本含至少 3 个以上英文单词；中文建议 ≥8 字，并插入
<wbr></wbr>制造潜在断点（如“国际化支持”） - CSS 中禁用
white-space: nowrap、overflow-wrap: anywhere等干扰换行的属性 - 避免与
text-align: center同时使用——居中会掩盖行长差异，balance 算法可能静默失效
示例有效写法：
.short-para {
max-width: 280px;
font-size: 1.1rem;
line-height: 1.4;
text-wrap: balance;
}
@supports 检测 + 渐进增强才是稳妥用法
别把它当兜底方案，而是当作可选增强。不加检测直接全局启用，等于在 Safari/Firefox 上白写，还可能因 fallback 字体加载时机导致换行错位后再跳变。
- 用
@supports (text-wrap: balance)包裹，确保只在支持浏览器中生效 - 中文标题务必加
word-break: keep-all，否则可能按字符切分（如“用户体验”变成“用户 体验”） - 不要和
text-overflow: ellipsis同时用——ellipsis 只作用于单行，与 balance 冲突 - 在
flex容器中使用时，加min-width: 0防止被拉伸变形
推荐写法：
@supports (text-wrap: balance) {
h1, h2 {
text-wrap: balance;
word-break: keep-all;
min-width: 0;
}
}
比 balance 更靠谱的短段落替代方案
对卡片标题、按钮文案、工具提示等固定场景，与其赌 balance 是否触发，不如用更可控的手法：
- 手动插入
<wbr></wbr>：在语义断点处加，如“构建高性能 前端应用” -
hyphens: auto+word-break: keep-all组合：中文下比 balance 更稳定出效果 - 用
display: flex; flex-wrap: wrap; justify-content: center模拟视觉平衡（适合标题居中且字数固定） - JS 方案如
BalanceText：兼容 IE9+，支持嵌套标签、实时 resize 响应，但引入额外依赖
真正容易被忽略的一点：text-wrap: balance 不改变 DOM 结构，也不生成伪元素，纯属渲染时的临时调整。用户截图、打印、或用阅读模式打开时，它会退化回默认换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
