绝大多数情况下应使用 overflow-wrap: break-word 替代 word-break: break-all，它仅在单词撑爆容器且无自然断点（如空格、/、.）时才内部断行，需配合 width 或 max-width 才生效，并注意中英文混排时需组合 word-break: keep-all 及检查 white-space 设置。
直接用
替换
，绝大多数情况下就能解决“单词被劈开”的问题——它只在真正撑爆容器时才断词，且优先按
、
、空格等自然断点换行。
为什么
overflow
-wrap: break-
word
能避免乱断词
它不是一上来就切单词，而是分两步走：
先尝试按浏览器默认规则换行：空格、斜杠（
）、点（
）、连字符（
）都是合法断点
只有这些断点都不存在，且单词长度 > 容器宽度时，才在单词内部插入换行
比如
会优先在
后换行，而不是把
切成
和
必须配 width 或 max-width 才生效
是“溢出换行”，没有宽度限制，浏览器根本不知道什么叫“溢出”。常见失效场景：
父容器是
或
子项，但没设
/
用了
却没限制宽度
写了
，但容器本身是
且内容不换行
补上
或具体像素值（如
）即可触发。
立即学习
“
前端免费学习笔记（深入）
”；
中英文混排时 overflow-wrap 可能“不工作”
中文本身按字换行，浏览器认为“有地方可断”，就不启动
的兜底逻辑——结果是英文长串（如
）原样撑开容器。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
解决方案是组合使用：
：处理极端长串（URL、路径）
：禁止中文内断行，同时让英文部分回归正常断点规则
移动端 iOS 12 以下需补
务必检查父级是否误设了
—— 这个属性会让所有换行控制完全失效
别忘了兼容老浏览器
IE10+ 支持
，现代浏览器推荐双写：
和
同时存在时，前者会完全覆盖后者——删掉前者，别留着“以防万一”。
最常被忽略的其实是
在 flex/grid 里的锁死效应：哪怕写了
，子项仍可能拒绝收缩。这时候加
或
才真正松开。
overflow-wrap: break-wordword-break: break-all/./.-https://example.com/very/long/path/veryveryoverflow-wrapflexgridwidthmax-widthdisplay: inline-blockoverflow-wrap: break-wordwidth: automax-width: 100%max-width: 300pxbreak-wordtest123456789overflow-wrap: break-wordword-break: keep-all-webkit-word-break: keep-allwhite-space: nowrapword-wrap: break-wordelement {
overflow-wrap: break-word;
word-wrap: break-word;
}word-break: break-alloverflow-wrap: break-wordmin-width: autooverflow-wrapmin-width: 0overflow: hidden