根本原因是flex子项默认min-width:auto，需显式设min-width:0才能触发换行；再配合overflow-wrap:break-word（优先）或word-break:break-all（兜底），并确保父容器有width/max-width限制。
Flex子项文字不换行？先查min-width: auto是否被覆盖
Flex子项默认带min-width: auto，它会阻止内容收缩，导致即使写了overflow-wrap: break-word或word-break: break-all，浏览器也宁愿撑宽容器，也不换行。这不是属性失效，是根本没触发换行条件。
必须显式设min-width: 0来覆盖这个隐式限制——它不是可选项，是换行生效的前提。漏掉这句，其他所有换行样式都白搭。
-
min-width: 0要加在文字所在的具体子元素上（比如.title），不是父Flex容器 - 如果子项同时设了
flex-shrink: 0，必须删掉——它和min-width: 0冲突，会彻底锁死宽度 - 若子项是
img、input等替换元素，还需额外控制其自身尺寸，否则min-width: 0可能引发高度异常
word-break和overflow-wrap怎么选？看文本类型
overflow-wrap: break-word优先保持单词完整，只在实在没空格可断时才切长串（如URL、base64）；word-break: break-all不管语义，超界就切，对中文可能把“数据库”切成“数据”和“库”。
稳妥做法是两者共存：overflow-wrap: break-word; word-break: break-all;，但需按场景加类控制：
- 纯中文/中英混排标题：只用
overflow-wrap: break-word，再配word-break: keep-all防中文字断开 - 日志ID、token、API响应体等含长英文字段：单独加
.log-id类，里面写word-break: break-all - 避免全局写
body { word-break: break-all }——它会影响所有文本，包括按钮、表单标签
Flex里想强制不换行并显示省略号？别只靠white-space: nowrap
white-space: nowrap确实能锁死不换行，但在Flex容器里极易失效：子项若没设flex-shrink: 0，它会被压缩，反而诱发内部换行；若设了min-width: 0，又会和nowrap冲突，导致省略号不出现。
标准单行省略三件套white-space: nowrap + overflow: hidden + text-overflow: ellipsis在Flex里常失灵，真正可靠的是-webkit-line-clamp方案：
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
注意：-webkit-line-clamp虽是WebKit私有属性，但现代Chrome/Firefox/Safari均已支持，且比nowrap组合更稳定。
移动端、表格、表单控件里换行为啥总失效？上下文规则不同
Flex换行逻辑在不同容器中会被覆盖：
- 表格单元格（
td）：必须配合table-layout: fixed+ 显式width，否则overflow-wrap直接被忽略 - 移动端Safari：需双写
word-wrap: break-word（兼容iOS 11及更早） +overflow-wrap: break-word（现代标准） -
input和textarea：无视overflow-wrap，input只能靠width+overflow: hidden截断；textarea要加resize: none+max-width约束
最常被忽略的细节：服务端返回的文本可能含不可见Unicode空格（如\u200b），它们会触发换行，调试时务必用开发者工具选中文字确认是否真“连续”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
