overflow-wrap: break-word 必须配合宽度约束才生效，且在 Flex/Grid 子项中需加 min-w-0 或 min-width: 0 才能触发换行，否则因默认 min-width: auto 而失效。
overflow-wrap: break-word 必须配合宽度约束才生效
写了 overflow-wrap: break-word 却没效果？大概率是容器没设宽度限制。这个属性只在“单词撑爆容器”时触发，不是主动找地方断。它对纯中文段落几乎无感（中文本来就能断），真正起作用的是中英文交界处的长西文串，比如 APIv3.2、order#20260701 或邮箱地址。
必须显式加约束：
-
max-width（如max-width: 300px） - 或
width: 100%（但仅在 flex/grid 容器中有效，且需额外处理min-w-0） - 避免和
white-space: nowrap共存——后者会直接禁用所有换行逻辑
Flex/Grid 子项里不加 min-w-0，overflow-wrap 就等于没写
这是最常被忽略的坑。在 display: flex 或 display: grid 的子项中，即使写了 overflow-wrap: break-word，浏览器也会因默认的 min-width: auto 拒绝收缩，导致文本死扛不换行。
解决方式很直接：
- Tailwind 用户：加
min-w-0 - 原生 CSS：写
min-width: 0 - 别指望
flex: 1或width: 100%能覆盖min-width: auto的优先级
word-break: break-all 慎用于用户可见文本
word-break: break-all 会让浏览器在任意字符间切断，比如把 JavaScript 拆成 JavaS-crip-t。它适合技术字段（UUID、base64、URL），但不适合标题、按钮、表单提示等面向用户的文本。
更严重的问题：
- 在中文混排下可能在汉字中间硬切，如“产品中心”变成“产-品-中-心”，破坏语义
- 移动端小屏 +
break-all容易导致点击热区错位（视觉上断开了，DOM 仍是连续文本） - 若真要用，建议仅限
、或后台管理类界面的字段展示
text-align: justify 对齐不均，末行要单独处理
中英文混排用 text-align: justify 实现两端对齐时，末行默认左对齐，看起来突兀。这不是 bug，是规范行为。
两种可靠解法：
- 加伪元素：
::after { content: ''; display: inline-block; width: 100%; } - 现代浏览器优先用
text-align-last: justify（注意 Safari 旧版本支持弱） - 别依赖
text-justify: inter-ideograph——它对英文部分无效，且兼容性差
换行从来不是单个 CSS 属性能决定的事。它是宽度、显示模式、布局上下文和断行策略共同作用的结果。哪怕你把 overflow-wrap: break-word 写得再标准，只要父容器是 flex 且漏了 min-w-0，或者文本包在 white-space: nowrap 里，它就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
