overflow-wrap: break-word 单独使用几乎无效，必须配合 width/max-width 提供换行依据、min-width: 0 解除 flex 子项抗压缩限制，并清除 white-space: nowrap 等干扰才能生效；移动端因 safari 兼容性及 webview 碎片化更易失效。
overflow-wrap: break-word 单独写几乎没用，必须配 width 或 max-width 才生效；移动端尤其容易失效，不是属性写错了，是漏了关键前提或组合。
overflow-wrap: break-word 为什么经常不生效
它只在“有自然断点但放不下”时才介入——比如英文单词中间有连字符、URL里有斜杠，或者中文词之间有空格。遇到纯数字串 12345678901234567890、无分隔符的 Base64 或连续英文 Supercalifragilistic，浏览器根本识别不出可断位置，overflow-wrap: break-word 就会静默跳过。
更实际的问题是：iOS Safari 在 iOS 15.4 之前对 overflow-wrap 支持不稳定；Android WebView 版本碎片化，部分旧内核直接忽略该声明。
- 父容器没设
width或max-width—— 浏览器认为“永远够宽”，根本不触发溢出逻辑 - 元素是
<span></span>或<a></a>这类 inline 元素 —— 默认不响应宽度限制，得先加display: block或display: inline-block - 祖先元素写了
white-space: nowrap（常见于按钮、Tooltip 组件）—— 它会继承并压制子级所有换行设置
移动端真正能落地的写法
别押宝单个属性。按场景选组合，且每种都必须带宽度约束：
-
white-space: normal; word-break: break-all;—— 最暴力可靠，适合日志 ID、哈希、路径等纯技术字符串；中英文都切，但语义不重要 -
white-space: normal; overflow-wrap: break-word; word-break: normal;—— 温和策略，优先保单词完整，只在撑爆时兜底断词；适合消息气泡、正文段落 -
white-space: pre-wrap; overflow-wrap: break-word;—— 保留用户输入的换行和空格，同时允许长串折行；适合评论、富文本输出
注意：word-break: break-all 和 overflow-wrap: break-word 同时存在时，前者会完全覆盖后者行为。
Flex 布局下文字死活不换行？查 min-width: 0
90% 的“写了 overflow-wrap 还溢出”问题，根子在 Flex 子项默认 min-width: auto —— 它锁死了内容收缩能力，导致换行逻辑被绕过。
修复方式非常具体：不是给父容器加样式，而是给**文本所在元素本身**加 min-width: 0。
<div style="display: flex"> <div style="min-width: 0; overflow-wrap: break-word;">一长串没有空格的中文文本</div> </div>
别用 overflow: hidden 强行遮掩——它只是藏起溢出，不解决换行失败的根本原因。
兼容写法与容易被忽略的细节
现代项目建议双写以兼顾旧环境：
-
overflow-wrap: break-word;—— 标准写法，所有现代浏览器认 -
word-wrap: break-word;—— IE6–8 仅支持这个，双写无害
真正容易被跳过的点：
-
overflow-wrap: anywhere比break-word更智能（Chrome 82+/Safari 14.1+），但会影响min-content计算，在 Flex/Grid 中可能引发意外收缩 - 中文混排英文长串时，
word-break: keep-all会让英文回归 normal 断点规则，但 iOS 12 以下需补-webkit-word-break: keep-all -
text-overflow: ellipsis必须配overflow: hidden+width才生效，此时换行逻辑被禁用，二者互斥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
