结论：仅靠 overflow-wrap: break-word 在移动端常失效，必须搭配 word-break: break-all 或 white-space: normal 才能可靠换行；因其仅在有自然断点时生效，而长数字、url等无边界内容需更强策略。
直接说结论：仅靠 overflow-wrap: break-word 在移动端常常失效，尤其遇到长数字、无空格URL或连续英文时；必须配合 word-break: break-all 或 white-space: normal 才能真正“自动换行”。
为什么 overflow-wrap: break-word 在移动端经常不生效
这个属性只在「有可断点的单词」前提下起作用——比如带空格的英文句子、中文词组之间有语义间隙。但移动端常见场景是：https://example.com/verylongpathwithnospaces、12345678901234567890、username@example.com。这些内容没有浏览器认可的断词边界（UBA word boundary），overflow-wrap: break-word 就会静默放弃换行。
更麻烦的是：iOS Safari 对 overflow-wrap 的支持直到 iOS 15.4 才稳定，旧版常回退到 normal 行为；Android WebView 则依赖系统 WebKit 版本，碎片化严重。
移动端真正可靠的换行组合写法
别只押注一个属性。按优先级和兼容性推荐以下三类组合（均需设置容器宽度或 max-width）：
-
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: anywhere（Chrome 82+/Safari 14.1+ 支持，比 break-word 更智能）。
容易被忽略的布局前提
即使 CSS 写对了，换行仍不触发，大概率卡在这几个地方：
- 父容器没设
width或max-width，尤其是flex或grid子项默认不收缩，文本永远“够宽” - 元素是
inline级（如span、a），需先加display: block或display: inline-block - 存在
white-space: nowrap的祖先元素（常见于按钮、导航栏组件），它会强制继承并覆盖子级设置 - 使用了
text-overflow: ellipsis却没配overflow: hidden和width，此时换行逻辑被完全禁用
一个最小可验证示例
.mobile-text {
width: 100%;
max-width: 300px;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
把这段样式应用在 <p class="mobile-text">https://example.com/thisisalongurlwithoutanybreakpoints</p> 上，在 iPhone SE（iOS 16）、Pixel 6（Chrome 124）上都能正确折行。如果换成 word-break: break-all，连 12345678901234567890 这种纯数字串也能断开。
真正难的不是写哪条规则，而是判断当前文本的构成特征——是用户输入的 URL？后台返回的 ID 字段？还是多语言混合消息？选错策略，轻则换行生硬，重则语义断裂。动手前先 inspect 一下实际内容结构，比盲目堆属性有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
