flex子项必须显式设min-width: 0，否则overflow-wrap: break-word或word-break: break-all无效；因其默认min-width: auto会阻止收缩，导致浏览器优先撑宽父容器而非换行，且该属性仅对flex直接子元素生效，需配合语义化断行策略及宽度约束。
Flex子项必须加min-width: 0
不加这行，overflow-wrap: break-word或word-break: break-all基本无效——不是属性没写对，而是Flex子项默认min-width: auto（等价于fit-content），会死守内容宽度，拒绝收缩。浏览器宁可把父容器撑宽，也不让子项换行。
- 必须加在Flex的**直接子元素**上，比如
.content，而不是父容器.container或内部span -
flex: 1在部分旧版Safari（≤15.6）中不隐含min-width: 0，务必显式写 - 如果子项同时设了
flex-shrink: 0，min-width: 0会被忽略，得先删掉flex-shrink: 0 - 嵌套Flex时要逐层处理：比如头像+文字块是Flex，那文字块本身也要加
min-width: 0
用overflow-wrap: break-word还是word-break: break-all
这不是二选一，而是按语义分层组合：前者保词义，后者兜底防溢出。
- 用户可见文本（长链接、邮箱、带连字符的术语）→ 主用
overflow-wrap: break-word - 技术字段（token、日志ID、哈希串、API路径）→ 加
word-break: break-all兜底 - 中英文混排正文 → 用
word-break: break-word（注意不是break-all），中文按字断，英文保词义 - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证支持
移动端必须检查的三个干扰项
漏掉任意一个，断行就失效。小屏空间紧张，容错率极低。
- 父容器必须有
max-width或明确width，否则浏览器无“换行依据”，直接跳过断行逻辑 - 检查是否继承了
white-space: nowrap（常见于按钮、表格单元格、UI框架默认样式），它会彻底禁用所有换行 - 留意Unicode窄空格（ ）或零宽空格（），它们会阻断
overflow-wrap触发，需替换成普通空格
微信X5内核和iOS Safari的兼容细节
微信内置浏览器不支持overflow-wrap: anywhere，而旧版Safari对min-width: fit-content + overflow-wrap组合支持差——这些坑不会报错，只会静默失效。
-
word-break: break-all在Android WebView和iOS Safari 10.1+支持良好，但中文环境会把“数据库”切成“数”+“据”+“库”，不能全局设，只加在明确含长英文的class上（如.api-path） - 若内容来自
v-html或dangerouslySetInnerHTML，样式必须作用在包裹容器上，而非内联标签本身 - 真正卡住人的从来不是写哪一行CSS，而是得先判断这段文字——能不能被切断语义。token可以，
Error: invalid_token就不该切在冒号前
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
