移动端超长英文单词溢出需三要素协同：明确宽度约束（如max-width:100%）、启用换行上下文（white-space:normal）、选用overflow-wrap:anywhere断行策略，缺一不可。
移动端超长英文单词溢出，核心不是“怎么断”，而是“让浏览器知道该在哪停、且允许它断”。关键在三要素协同：明确宽度约束 + 启用换行上下文 + 选对断行策略。
必须设 max-width 或 width
没有宽度边界，浏览器永远认为“还能撑”，overflow-wrap: break-word 和 anywhere 都不会触发。不要依赖 100% 宽度的父容器自动生效——很多框架（如 Tailwind 的 flex 子项）默认不收缩。
- 推荐写
max-width: 100vw或max-width: 100%，比固定像素更适配不同屏宽 - 若在 flex 布局中，子元素需额外加
min-width: 0，否则默认min-width: auto会锁死收缩能力 - 避免只设
width: fit-content或inline显示，它们天然拒绝换行
优先用 overflow-wrap: anywhere（现代首选）
它比 break-word 更适合移动端窄屏：不等空格或连字符，空间不足就立刻在合理位置（如 /、.、@ 前）断开，既防溢出又保语义。比如 https://api.example.com/v2/users?id=123 在 320px 宽度下，会自然断成两行，而不会卡在 = 后不动。
- 兼容性：Chrome 107+、Firefox 109+、Safari 16.4+ 已稳定支持
- 降级方案：老版本 Safari 可叠加
word-break: break-word（非标准但实测有效） - 禁用
word-break: break-all——它和anywhere冲突，且破坏可读性
wbr 标签要配合 CSS 才生效
<wbr> 不是“补丁”，而是内容层的语义提示。它只在 overflow-wrap 触发时被优先采纳，单独存在毫无作用。
立即学习“前端免费学习笔记（深入）”；
- 只插在逻辑断点：
https://example.<wbr>com/<wbr>api/<wbr>v2</wbr></wbr></wbr>，不插在hel<wbr>lo</wbr>这类普通单词中间 - 必须搭配：
max-width+white-space: normal+overflow-wrap: anywhere - 动态生成比手写可靠：服务端或 JS 按规则（如 /、.、@ 后）批量插入，避免漏加或冗余
绕过 Safari 的隐藏限制
iOS Safari（尤其 15.4 之前）对富文本、contenteditable 或 textarea 中的换行控制较弱，需针对性处理：
- 编辑场景加
-webkit-hyphens: auto，它能作为断行触发器，哪怕没连字符 - 避免用
<pre>或<code>包裹用户输入文本，默认禁用换行 - 真机测试必做：模拟器常漏掉渲染异常，特别是 flex + 换行组合
