text-wrap: balance 仅 Chrome 120+ 和 Edge 120+ 支持，Firefox 与 Safari 完全不支持；text-wrap: pretty 对中文几乎无效；line-clamp 需 display: -webkit-box 等三件套配合；word-break 优先级高于 overflow-wrap。
text-wrap: balance 在哪些浏览器里根本没用
它目前只在 Chrome 120+ 和 Edge 120+ 中可用，Firefox 和 Safari 完全不支持，连 text-wrap: stable 都没实现。别在生产环境直接写 text-wrap: balance 期望自动均分行末字数——用户打开页面发现文字全挤在第一行，不是 bug，是预期行为。
常见错误现象：text-wrap: balance 写了但毫无反应；DevTools 里看到该属性被划掉（invalid value）；用 Can I Use 查了“text-wrap”，结果误把实验性支持当稳定支持。
- 使用场景：仅适合内部工具、Chrome 专用后台、或配合 JS 特性检测做降级
- 兼容性影响：加了这个属性不会破坏其他换行逻辑，但也不会触发任何 fallback 行为
- 替代方案优先考虑
hyphens: auto+word-break: break-word组合，更稳
中文排版下 text-wrap: pretty 实际效果很有限
text-wrap: pretty 的设计目标是减少孤行（orphan）、控制段首/段尾留白，但它依赖浏览器对“语义断行点”的理解——而中文没有空格分隔，也没有明确的音节边界，Chrome 当前对中文的 pretty 处理基本等同于没开。
容易踩的坑：以为开了 text-wrap: pretty 就能解决“最后一行只剩一个字”的问题，结果发现和没写一样；或者误以为它会智能断词，其实它不触发任何中文分词逻辑。
- 参数差异：
pretty对英文文本有效（比如避免单个冠词独占行），对中文几乎无感 - 性能影响：极小，但无效属性仍会参与 CSS 计算流程，没必要白加
- 真正管用的是手动插入
text-break 和 word-break 混用时谁说了算
text-break 是旧草案名，已废弃，现在标准中只有 word-break 和 overflow-wrap（旧名 word-wrap）。如果同时写了 word-break: break-all 和 overflow-wrap: break-word，最终行为由 word-break 主导——它更激进，会强行在任意字符间断行（包括中文汉字中间），而 overflow-wrap 只在单词超长且无其他断点时才触发。
常见错误现象：设置了 overflow-wrap: break-word 却发现中文被切成单字，一查发现 word-break: break-all 在父元素上悄悄生效了。
- 使用场景：
word-break: break-all适合代码块、日志截断；overflow-wrap: break-word更适合正文、卡片标题 - 注意层级：CSS 优先级相同的情况下，后声明的生效；但继承关系中，子元素若未显式设置，会继承父元素的
word-break - 推荐组合：
word-break: normal; overflow-wrap: break-word;，最接近自然阅读流
line-clamp 要配合 display: -webkit-box 才能工作
line-clamp 是个典型的 WebKit-only 属性，必须搭配 display: -webkit-box 和 -webkit-line-clamp 才能生效，标准写法里 line-clamp 本身只是语法糖，背后仍靠私有前缀驱动。
容易踩的坑：只写 line-clamp: 2，忘了加 display: -webkit-box，结果高度正常、文字不截断；或者用了 display: flex，导致 -webkit-line-clamp 直接失效。
- 必须三件套：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N - 不能和
height+overflow: hidden混用，否则可能截断位置错乱 - Firefox 支持
line-clamp（无需前缀）但要求display: grid或block，实际兼容性仍建议用 -webkit 方案保底
事情说清了就结束。真正影响阅读体验的，往往不是某一个属性开没开，而是 word-break 和 overflow-wrap 的组合策略、hyphens 的语言设置、还有那些藏在 white-space 里的默认行为——它们不动声色，但改一行就能让整段文字呼吸起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
