中文标题换行过早的根源是word-break: break-all无视语义强行断字，正确方案是word-break: keep-all + overflow-wrap: break-word + min-width: 0，并配合box-sizing: border-box和text-wrap: balance兜底。
文字换行过早，本质是浏览器在不该断的地方强行断了——常见于中文标题、中英混排短句，或用了 word-break: break-all 却没加约束。这不是“换不了”，而是“换得太急”。
为什么 word-break: break-all 会让中文标题断得丑？
它把每个汉字都当作独立可断点，比如「用户体验设计」可能被切成「用户体 验设计」甚至「用户 体验 设计」，破坏语义连贯性。更麻烦的是，它在 flex 或 grid 容器里还会和 min-width: auto 冲突，导致换行提前发生。
-
word-break: break-all对中文没有“词语”概念，只认字符边界 - 在
display: flex容器中，子项默认min-width: auto，但一旦内容含多个汉字，浏览器会按“最小可断单元”（单字）计算最小宽度，从而触发过早换行 -
white-space: normal下，中文本就允许任意字符间断行，叠加break-all等于双重放行
word-break: keep-all + overflow-wrap: break-word 是更稳的组合
这对组合能守住中文词语完整性，同时兜底处理英文长词或 URL。关键在于：前者锁住中文不断字，后者只在真撑不开时才干预英文部分。
-
word-break: keep-all：中文整词显示，英文仍按空格/连字符断（不乱切） -
overflow-wrap: break-word：对英文长单词（如supercalifragilisticexpialidocious）或 URL，在必要时内部断开，不影响中文 - 必须搭配
white-space: normal（默认值即可），避免误用pre或nowrap干扰
Flex/Grid 布局下，min-width: 0 是隐藏开关
哪怕你写了 overflow-wrap: break-word，在 flex 或 grid 子项里它大概率不生效——因为规范规定网格项和弹性项默认 min-width: auto，而这个“auto”会取内容最小固有宽度（即最短不可断字符串长度）。对中文来说，就是单字宽；对英文，可能是整个单词宽。结果就是：容器一窄，它立刻换行。
- 显式写
min-width: 0覆盖默认行为，让overflow-wrap有机会起作用 - 在 Grid 中尤其关键，
overflow: hidden也能间接重置min-width，但语义不如min-width: 0清晰 - 别忘了加
box-sizing: border-box，否则 padding 会加剧宽度误判
text-wrap: balance 不是万能解，但能修最后一道观感
它只在多行已存在时尝试均分字数，比如 14 字标题在小屏上本就会断成两行，text-wrap: balance 可以让它尽量接近「7+7」而非「3+11」。但它完全不控制是否换行、在哪断、字号大小——这些都得靠前面的属性先铺好基础。
- 仅 Chrome 117+ 和 Safari 17.4+ 支持，Firefox 和旧 Edge 忽略，必须用
@supports包裹 - 必须配合
width或max-width，且元素为display: block或inline-block - 中文标题务必加
word-break: keep-all，否则 balance 会按单字分配，反而更碎
真正卡住换行时机的，从来不是某个属性太弱，而是几个属性在互相打架：一个说“可以断”，另一个说“必须保最小宽”，第三个又把空格吞了。理清谁管“断点”，谁管“宽度底线”，谁管“空白处理”，问题就解决了一大半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
