overflow-wrap: break-word 单独使用无效，需组合 white-space、word-break 等属性并处理 flex 的 min-width: auto 限制，才能在移动端正确断行长英文。
只写 overflow-wrap: break-word 基本没用，移动端长英文溢出必须组合声明，且要防住 flex 容器的 min-width: auto 锁死行为。
为什么 overflow-wrap: break-word 在 iOS 和安卓 WebView 里常静默失效
它只对「有自然断点」的单词起作用，比如带空格的句子。但真实场景中，https://api.example.com/v1/users/1234567890abcdef、user_name_20260727_long_id 这类无空格长串，浏览器根本找不到 UBA word boundary，直接跳过断行逻辑。
- iOS Safari 15.4 之前对
overflow-wrap支持极弱，常回退为normal行为 - Android WebView 版本碎片化严重，X5 内核（微信）至今不认标准属性
- 哪怕写了，若父容器是
display: flex且子项没设min-width: 0，flex 默认的min-width: auto会硬扛住宽度收缩，断行彻底失去触发点
真正能落地的三组组合写法（按场景选）
所有组合都需前置条件：max-width 或明确 width，且不能有祖先元素设 white-space: nowrap。
-
纯展示型内容（日志、token、路径）：
white-space: normal; word-break: break-all;—— 中英文都可切在任意字符间，iOS 12+ 全支持，最稳 -
用户可见正文（消息、昵称、标题）：
white-space: normal; overflow-wrap: break-word; word-break: normal;—— 优先保单词完整，只在必要时进词内断 -
含原始换行符的内容（富文本、API 响应体）：
white-space: pre-wrap; overflow-wrap: break-word;—— 保留缩进和换行，同时允许溢出时断词
Flex 容器里文字死活不换行？先看这三处
这不是 CSS 写错了，是 flex 的收缩机制在拦路。
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
立即学习“前端免费学习笔记（深入）”；
- 子元素必须显式加
min-width: 0（flex: 1不一定隐含它，别赌） - 父容器不能设
flex-shrink: 0或flex: 0 0 auto，否则子项宽度锁死 - 避免用
inline级元素（如<span>）直接套样式，先加display: block或inline-block
真机测试绕不开的坑
iOS Safari 15.4–16.3 存在 -webkit-line-clamp 渲染 bug，但这里说的是纯换行——长英文在 input[type="text"] 里，word-break: break-all 依然不生效。这类表单控件建议改用 <textarea> 或后端限制输入长度。
更隐蔽的是中英文混排：中文本身可断字，浏览器就忽略 overflow-wrap，导致夹在中文里的长英文串（如“订单号：ORD-20260727-9999999999”）照样溢出。此时得组合 word-break: keep-all + overflow-wrap: break-word，但 iOS 12 以下不支持 keep-all，得补 -webkit-word-break: keep-all。
