overflow-wrap: break-word在移动端常失效，因其仅在有自然断点（如空格、标点）时触发，而长url、数字串等无uba词边界；加之ios 15.4前支持弱、android webview碎片化，且必须配合max-width、white-space: normal及min-width: 0等约束才生效。
仅靠 overflow-wrap: break-word 在移动端基本不可靠，尤其面对长数字、URL 或连续英文时，必须组合其他属性并检查布局前提。
为什么 overflow-wrap: break-word 在 iOS 和 Android 上经常失效
这个属性只在浏览器识别出「可断词边界」时才触发换行，比如空格、标点或中文语义间隙。但移动端常见内容如 https://a.b/c/d/e/f/g/h/i/j/k、12345678901234567890、user@example.com 全部没有 UBA word boundary，它就直接放弃处理。
iOS Safari 直到 15.4 才稳定支持该属性；Android WebView 则严重依赖系统 WebKit 版本，旧设备（如 Android 8–10 的定制 ROM）常回退为 normal 行为。
更隐蔽的问题是：即使 CSS 写对了，父容器没设 max-width、元素是 inline 级（如 <a></a>）、或祖先有 white-space: nowrap，都会让换行逻辑完全不启动。
真正能落地的三类组合写法
所有方案都需提前确认容器有明确宽度约束（width 或 max-width），且非 inline 元素（必要时加 display: block）：
-
white-space: normal; word-break: break-all;—— 最暴力也最稳，适合日志 ID、路径、token 等纯展示文本；注意在纯中文中可能切字（如“欢迎”变“欢|迎”） -
white-space: normal; overflow-wrap: break-word; word-break: normal;—— 更温和，优先保单词完整，只在必要时进单词内断；适合消息气泡、用户可见正文 -
white-space: pre-wrap; overflow-wrap: break-word;—— 保留原始换行符和空格，同时允许溢出时断词；适合富文本渲染、代码说明等场景
若需兼顾中英文可读性且目标环境支持（Chrome 82+ / Safari 14.1+），可用 overflow-wrap: anywhere 替代 break-word，它比后者更智能，对长单词的断点选择更合理。
Flex 布局里换行不触发？先查这三点
Flex 子项是移动端换行失效最高发场景，问题往往不在 CSS 属性本身：
- 默认
flex-shrink: 1会压缩文本容器宽度，导致「看似有内容溢出」实则计算宽度不足，换行条件未满足 - 漏写
min-width: 0—— 这是修复关键，强制子项参与宽度收缩计算，让overflow-wrap有机会生效 - 祖先元素存在
white-space: nowrap（常见于按钮、导航栏封装组件），它会继承并覆盖子级所有换行设置
典型修复写法：.text-item { min-width: 0; white-space: normal; overflow-wrap: break-word; }
text-overflow: ellipsis 和换行不是一回事，别混用
它只对单行生效，且必须同时满足三个条件：white-space: nowrap + overflow: hidden + 明确宽度。一旦你加了 white-space: normal 想换行，ellipsis 就彻底失效。
多行省略要用 -webkit-line-clamp，但它不是换行方案——它靠截断行数实现视觉省略，底层仍依赖 display: -webkit-box，和现代 flex 或 grid 不兼容；Firefox 虽已支持无前缀 line-clamp，但开启需依赖 layout.css.line-clamp.enabled（当前主流版本默认开启，但低配安卓 WebView 仍不可靠）。
真正容易被忽略的是：长不可折字符串（如 URL）会让 line-clamp 渲染异常——末行撑高、省略号错位甚至消失。此时必须前置加 word-break: break-all 或 overflow-wrap: anywhere，否则整套逻辑崩盘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
