长单词在移动端不换行会导致横向滚动或溢出，因浏览器默认视连续字母数字串为不可分割单元；推荐按语义分场景处理：技术字段用word-break: break-all，普通文本优先overflow-wrap: break-word并兼容word-break: break-word。
长单词在移动端不换行的典型表现
页面在 iOS 或 Android 浏览器中出现横向滚动条，或文字直接撑破容器、溢出父级，常见于 API 路径（如 /v1/users/abc123def456ghi789）、哈希值（sha256:8a3b4c...f9e0）、邮箱本地部分（very-long-username-with-dashes@example.com）。这不是 CSS 未生效，而是浏览器默认对连续字母数字串视为“不可分割单元”。
word-break: break-all 的实际效果与风险
它强制在任意字符间断行，适合技术类内容（如日志、token），但会破坏语义可读性——比如把 “internationalization” 拆成 “inter-nation-aliza-tion” 这种无意义切分。注意：break-all 在 Chrome 和 Safari 表现一致，但在 Firefox 中对中文/日文效果较弱。
- 仅用于明确不需要语义保留的场景，如代码块、URL 展示区
- 避免用在正文段落或按钮文字中
- 配合
overflow-wrap: break-word可兜底：当break-all失效时尝试按空格或标点断行
hyphens: auto 为什么在移动端常失效
该属性依赖系统语言设置和浏览器支持。iOS Safari 自 9.0 起支持，但仅对英文有效且需显式声明 lang="en"；Android WebView 基本不支持；Chrome for Android 默认关闭 hyphenation 引擎。更关键的是：它对纯数字+字母混合串（如 UUID）完全无效——hyphenation 是为自然语言设计的，不是为 token。
- 必须设置
lang属性，且值要匹配目标语言（如lang="en"） - 需要字体本身包含连字符字形（多数系统字体满足）
- 对
abc123def类字符串不起作用，别指望它解决 API 路径换行
更稳妥的组合方案：针对不同内容类型分别处理
没有“一招鲜”，得按内容语义选策略。技术字段用 break-all，普通文本优先用 overflow-wrap: break-word，再加 word-break: break-word（旧版 Safari 兼容）。
立即学习“前端免费学习笔记（深入）”；
.text-normal {
overflow-wrap: break-word;
word-break: break-word; /* Safari <= 14 */
}
.token-inline {
word-break: break-all;
overflow-wrap: anywhere; /* 更现代的替代，Chrome 86+、Safari 15.4+ */
}
注意 overflow-wrap: anywhere 比 break-word 更激进：它允许在任意位置断行（包括单个字母后），且不依赖空格，是目前最接近“智能强制断行”的方案，但兼容性需查 Can I Use —— 微信内置浏览器（X5 内核）仍不支持。
