移动端英文长单词不换行是浏览器默认行为，需用overflow-wrap: break-word处理普通文本和URL，配合明确宽度；路径类用overflow-wrap: anywhere；慎用word-break: break-all，避免破坏语义。
移动端英文长单词不换行，不是你 CSS 写错了，而是浏览器默认把 https://example.com/very-long-path 这种串当“一个不可分割的单词”——它只在空格、标点或 Unicode 换行机会处断，不会主动切英文词。直接上 word-break: break-all 最快，但大概率会把 JavaScript 切成 JavaS-crip-t，破坏可读性和复制粘贴。得按内容类型选策略。
用 overflow-wrap: break-word 处理普通文本和 URL
这是最安全的兜底方案：只在整词放不下时才断，优先保语义。比如 filename.pdf 会整体换行；撑不开才在字母间切。
- 必须配合明确宽度，如
max-width: 100%或width: 300px，否则无边界可依 - 避免父级有
white-space: nowrap（比如用了whitespace-nowrap类），它会直接压制所有换行 - 旧版 Safari（≤14）需要补
word-break: break-word兼容，现代写法是：.text-safe { overflow-wrap: break-word; word-break: break-word; /* Safari ≤14 */ }
用 overflow-wrap: anywhere 处理路径类文本（如 API URL）
anywhere 比 break-word 更激进，但它有节制：允许在 /、-、.、_ 后断行，不会在 http 中间切。适合 /v1/users/abc123def456 这类结构化字符串。
- Chrome 86+、Safari 15.4+、Firefox 97+ 支持；老版本 fallback 到
break-word - 别和
word-break: break-all混用，后者会覆盖前者逻辑 - Tailwind 用户可用
overflow-wrap-anywhere（v3.3+），但需确认构建时启用了该功能
慎用 word-break: break-all，除非内容明确无需语义
它真能解决溢出，但代价是把所有东西都切成碎片。技术字段（如哈希值 sha256:8a3b4cf9e0...、UUID）可用，正文、按钮、链接文字千万别碰。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 在
contenteditable或textarea中对break-all支持不稳定，必要时加-webkit-hyphens: auto辅助触发 - 中文混排时，
break-all可能在汉字中间硬切（如“处理”→“处”+“理”），视觉断裂感强 - 如果用了，务必加
display: block或inline-block，否则display: inline下可能无效
hyphens: auto 在移动端基本靠不住
它依赖系统语言、字体连字符字形、浏览器引擎开关，iOS Safari 要 lang="en" 才生效，Android WebView 基本不支持，对 abc123def 这类纯数字字母串完全无效。
- 别指望它救 API 路径或 token；仅可用于纯英文段落，且需显式声明
lang="en" - Chrome for Android 默认关闭 hyphenation，即使写了也白搭
- 若真要用，组合写法是：
hyphens: auto; -webkit-hyphens: auto;，并确保字体支持（多数系统字体 OK）
真正容易被忽略的是：断行效果取决于整个渲染链——容器宽度、显示模式、祖先 white-space 设置、甚至字体度量。测试时别只看桌面 Chrome，一定要用真机 DevTools 切换到 iPhone SE 或 Pixel 5 尺寸，贴一段真实的 https://api.example.com/v2/long/endpoint/with/params?token=abc123def456ghi789 验证。
