overflow-wrap: break-word 最稳妥但需满足前提：宽度约束、white-space 允许换行、无 flex 抗压缩干扰；失效主因是浏览器仅在“整词放不下”时才断词，常见于父容器无宽、white-space: nowrap、inline 元素未设 display、flex 子项 min-width: auto 未重置。
overflow-wrap: break-word 是目前最稳妥的英文断词方案，但它不是“一写就生效”，必须满足宽度约束、white-space 允许换行、无 flex 抗压缩干扰等前提。
为什么 overflow-wrap: break-word 经常不生效
它只在浏览器确认“整个单词放不下”时才介入断词，不是无条件切字。常见失效原因包括：
- 父容器没设
width或max-width—— 浏览器认为“永远够宽”，根本不触发溢出逻辑 - 元素本身或祖先节点设置了
white-space: nowrap（尤其来自 Ant Design、Bootstrap 的 utility class），直接禁用所有换行机会 - 元素是
<span></span>或<a></a>这类 inline 元素，默认不响应宽度限制，得先加display: block或display: inline-block - 在
display: flex子项中，min-width: auto默认锁死收缩能力，必须显式加min-width: 0
word-break: break-all 什么情况下才该用
它会无视语义，在任意字符间切断，适合纯技术字符串，但会破坏可读性：
- 适用场景：哈希值（
sha256:abc123...）、Base64 编码、日志 ID、连续数字串（12345678901234567890） - 慎用场景：普通英文段落、API 方法名（
fetchDataFromAPI可能被切成fe-tchDa-taF-romA-PI） - 中文下更危险：
身份证可能变成身+份证，视觉碎片化 - 与
<wbr></wbr>标签互斥——一旦启用，所有语义断点都被忽略
表格单元格里怎么让英文自动断词
word-break: break-all 单独加在 <td> 上大概率无效，真正起作用的是三要素组合：
<ul><li>给 <code><table> 加 <code>table-layout: fixed，否则列宽由内容撑开，根本无“边界”可言
<td> 设明确宽度约束，如 <code>max-width: 200px 或 width: 150px
white-space: normal（很多 UI 框架默认给 <td> 加了 <code>nowrap）
overflow-wrap: break-word 替代 word-break: break-all，对 URL 和路径更友好移动端 Safari 和旧 WebView 怎么兼容
iOS 14.5+ 支持 overflow-wrap: break-word，但 iOS 12–13 只认已废弃的 word-wrap: break-word；Android WebView 版本碎片化，部分内核直接忽略该声明：
- 必须双写：同时声明
word-wrap: break-word和overflow-wrap: break-word - 避免在
<input>或<textarea></textarea>上依赖它——这些控件不响应overflow-wrap，换行靠原生行为或wrap="soft" - Flex/Grid 容器中的文本，务必给文本所在元素（比如
<td> 内的 <code><div>）加 <code>min-width: 0，这是 90% “写了也不换行”问题的根因真正容易被忽略的，是换行依赖布局上下文：没有宽度约束、
white-space被覆盖、min-width: auto锁死收缩——哪怕属性写得再标准，也毫无作用。
