只设hyphens: auto无效，因需同时满足lang="en"显式声明、overflow-wrap: break-word（或anywhere）强制断行、系统字体支持连字符字形三条件，缺一即静默失效。
移动端英文单词默认不换行，hyphens 属性能解决，但必须配合 word-break 和语言声明才真正生效。
为什么只设 hyphens: auto 没用？
Chrome 和 Safari（iOS）对 hyphens 的支持有硬性前提：元素必须明确声明 lang 属性（如 lang="en"），且需搭配 word-wrap: break-word 或 overflow-wrap: break-word。否则即使写了 hyphens: auto，浏览器也直接忽略。
- 缺失
lang时，WebKit 内核（包括 iOS Safari）完全不触发连字符逻辑 -
hyphens本身不强制断词，它只在自然断点（音节间）插入连字符；若没有足够宽度或未启用软换行，单词仍会溢出 - Android WebView 对
hyphens支持更弱，部分版本仅认hyphens: manual
hyphens 在不同平台的实际表现差异
iOS 15+ 和 macOS Safari 支持较好，但 Android Chrome（尤其旧版）基本不响应 hyphens: auto。实测中，hyphens: auto 在 iOS 上需同时满足三个条件才生效：
- 父容器设置
hyphens: auto - 文本节点所在元素带
lang="en"（不能只写在<html>根上） - 必须加
overflow-wrap: break-word（word-wrap是别名，优先用标准名）
示例有效写法：
立即学习“前端免费学习笔记（深入）”；
<p lang="en" style="hyphens: auto; overflow-wrap: break-word;">This is a supercalifragilisticexpialidocious example.</p>
替代方案：当 hyphens 不可用时怎么办？
如果目标环境包含大量 Android 低版本或微信内置浏览器（X5 内核），hyphens 基本不可靠。此时应降级使用更兼容的方案：
-
word-break: break-word：粗暴在任意位置断词，可能切在音节中间，但 100% 生效 -
word-break: break-all：连中文也会断，慎用；仅适合纯英文、且允许极端断词的场景 - 服务端预处理：用 hyphenation 库（如
hyphenopoly）动态注入软连字符，比纯 CSS 更可控
注意：break-word 和 break-all 都不需要 lang，也不依赖 hyphens，是兜底首选。
容易被忽略的细节：字体与连字符样式
即使所有条件满足，最终是否显示连字符还取决于字体本身是否包含连字符字形（glyph）。系统字体如 -apple-system、system-ui 通常支持，但自定义 Web Font 若未嵌入连字符，hyphens: auto 仍不会显示短横线。
- 可通过浏览器开发者工具的“Computed”面板检查
hyphens是否被计算为auto，再看实际渲染是否有- - 测试时避免用
font-family: monospace，等宽字体对连字符支持普遍较差 - 不要依赖
text-align: justify强制触发连字符——它和hyphens无因果关系
真正在意换行效果，就得把 lang、overflow-wrap、字体支持这三件事全盯住，少一个都白配。
