必须显式设置min-width: 0，因Flex子项默认min-width: auto会阻止收缩，导致overflow-wrap: break-word无法触发换行；再配合max-width约束和white-space: normal，并按语义分层选用overflow-wrap: break-word（保词义）与word-break: break-all（兜底防溢出）。

移动端长英文单词撑破容器，不是 CSS 写错了，而是浏览器根本没走到换行逻辑——它先把你整个 flex 项撑宽了，再谈断不断行。

为什么加了 overflow-wrap: break-word 还是不换行？

因为 flex 直接子项默认有 min-width: auto（等价于 min-width: fit-content），它会死守“这串无空格字符必须完整显示”，宁可拉宽父容器也不缩自己。DevTools 的 Computed 面板里看不到这个值，但它真实生效。

• 只对 display: flex 的**直接子元素**起作用，套一层 <div> 就失效 <li> <code>flex: 1 在旧版 Safari（≤15.6）中不一定隐含 min-width: 0，必须显式写
• 如果子项同时设了 flex-shrink: 0，min-width: 0 直接被忽略——得先删掉它

overflow-wrap: break-word 和 word-break: break-all 到底怎么选？

这不是二选一，而是按语义分层：前者保词义，后者兜底防溢出。

• 用户可见的长链接、邮箱、带连字符的术语 → 主用 overflow-wrap: break-word（只在整词放不下时才断）
• token、API 路径、哈希串、日志 ID 等纯技术字段 → 加兜底 word-break: break-all（防止 overflow-wrap 遇无可断点失效）
• 别用 word-break: break-word —— 已废弃，现代浏览器不保证支持
• 稳妥写法：overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底

移动端必须配齐的三个条件

漏一个，break-word 就等于没写。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

立即学习“前端免费学习笔记（深入）”；

• 父容器要有明确宽度约束：max-width 或 width（比如 max-width: 100% 或具体像素值），否则浏览器无“换行依据”
• flex 直接子项必须加：min-width: 0（不能加在父容器或内层 <span></span> 上）
• 检查是否被 white-space: nowrap 继承（常见于按钮、表格单元格、UI 框架组件），需手动重置为 white-space: normal

微信 X5 内核和老 Safari 的兼容细节

微信内置浏览器不支持 overflow-wrap: anywhere，iOS 11 及更早只认旧名 word-wrap: break-word。

• 兼容写法必须双写：word-wrap: break-word; overflow-wrap: break-word;
• word-break: break-all 在 Android WebView（Chrome 58+）和 iOS Safari（10.1+）中支持良好，但中文环境会把“数据库”切成“数”+“据”+“库”，所以不能全局设，只加在明确含长英文的 class 上（如 .api-path、.token-value）
• 若内容来自 v-html 或 dangerouslySetInnerHTML，样式必须作用在包裹容器上，而不是内联标签本身

真正卡住人的从来不是哪一行 CSS，而是得先判断这段文字——能不能被切断语义。token 可以，错误提示里的 Error: invalid_token 却不该切在冒号前。