中英文混排折行异常的根本原因是浏览器换行逻辑差异：中文按字断，英文按单词断；需用overflow-wrap: break-word配合宽度约束及min-w-0（Flex/Grid中）才能生效，避免white-space: nowrap干扰。
为什么中英文混排时文字不按预期折行？
根本原因不是 CSS 没生效，而是浏览器对中英文的换行逻辑天然不同：中文每个字默认可断点，英文则以单词为单位、只在空格或标点处换行。当一段文本里夹着 APIv3.2、订单#20260701 或邮箱地址时，浏览器会在 @、.、# 处尝试断开——但这属于“自然断点”，不是强制策略，且容易被父容器布局压制。
overflow-wrap: break-word 是首选，但必须带宽度约束
overflow-wrap: break-word（旧名 word-wrap: break-word）是解决混排溢出最稳妥的方式，但它不会主动“找地方断”，只在单词撑爆容器时才介入。没宽度限制，它就完全不触发。
- 必须配合显式宽度控制：
max-width: 200px或width: 100%（在 flex/grid 中还要加min-w-0） - 避免和
white-space: nowrap共存——后者会直接禁用所有换行行为 - 对纯中文段落效果有限，因为中文本来就能断；真正起作用的是中英文交界处的长西文串
word-break: break-all 要慎用，尤其在用户可见文本中
word-break: break-all 会让浏览器在任意字符间切断，比如把 JavaScript 拆成 JavaS-crip-t。它适合技术字段（UUID、base64），但不适合标题、按钮、表单提示等面向用户的文本。
- 中文混排下可能在汉字中间硬切（如“产品中心”变成“产-品-中-心”），破坏语义
- 移动端小屏 +
break-all容易导致点击热区错位，因为视觉上断开了，但 DOM 仍是连续文本 - 若真要用，建议仅限
、或后台管理类界面的字段展示
Flex/Grid 容器里，min-w-0 是换行生效的前提
在 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的优先级
最常被忽略的一点：换行不是单一属性能决定的事，它是宽度、显示模式、布局上下文和断行策略共同作用的结果。哪怕写对了 overflow-wrap: break-word，只要父容器是 flex 且没设 min-w-0，或者文本包在 white-space: nowrap 里，它就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
