长单词在移动端不换行会导致横向滚动或溢出，因浏览器默认视连续字母数字串为不可分割单元；推荐按语义分场景处理：技术字段用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 <p>注意 <code>overflow-wrap: anywhere</code> 比 <code>break-word</code> 更激进：它允许在任意位置断行（包括单个字母后），且不依赖空格，是目前最接近“智能强制断行”的方案，但兼容性需查 Can I Use —— 微信内置浏览器（X5 内核）仍不支持。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
