hyphens: auto 仅对带正确 lang 属性的可断英文单词生效，中文日文韩文及 Base64/邮箱/URL 等无效；需配合 overflow-wrap 防溢出，IE11/Safari 旧版需降级处理。
hyphens: auto 能加连字符，但几乎从不生效——除非你同时满足三个硬条件：语言标记正确、浏览器支持该语种断字规则、内容本身是可断的英文单词。中文、日文、韩文文本基本无视它。
为什么 hyphens: auto 在页面里没反应
最常见原因是 lang 属性缺失或写错。比如 <p>JavaScript</p> 即使加了 hyphens: auto 也完全不会断，因为浏览器不知道这是英语；必须显式写成 <p lang="en">JavaScript</p>。服务端渲染漏掉 lang，前端再怎么补 CSS 都白搭。
- Chrome 和 Safari 对
lang="en"支持较好，lang="de"或lang="fr"也行，但需对应系统内置词典 - Firefox 要求更严，部分版本还依赖操作系统级 hyphenation 字典
- 所有主流浏览器对
lang="zh"、lang="ja"、lang="ko"均忽略hyphens: auto—— 汉字本身可断，不需要连字符 - Base64 字符串、邮箱、URL 这类无语义长串，浏览器根本不识别为“单词”，
hyphens完全不触发
hyphens 和 overflow-wrap 的分工边界
hyphens: auto 是“优雅断行”方案，目标是保持可读性；overflow-wrap: anywhere 是“保底不断溢出”方案，目标是不出滚动条。二者不是替代关系，而是分层协作：
- 先用
overflow-wrap: anywhere防止容器被撑爆（尤其表格固定列宽场景） - 在已确认是自然英文段落的前提下，叠加
hyphens: auto+lang="en"提升阅读体验 - 别指望
hyphens解决verylongemail@example.com这类问题——它只对真实单词起作用 - 如果内容来自用户输入或 API，无法保证语言一致性，
hyphens应视为可选增强，而非核心逻辑
IE11 及旧版 Safari 的降级处理
IE11 完全不支持 hyphens，Safari 9–12 对 hyphens: auto 支持极弱。此时只能放弃连字符，改用保守断行：
立即学习“前端免费学习笔记（深入）”；
- 主方案：用
overflow-wrap: break-word（IE11 兼容） - 备选强化：对固定宽表格列等关键位置，加
word-break: break-all强制断（注意语义风险） - 切勿混用
word-break: break-all和hyphens: auto—— 前者会直接覆盖后者，且破坏所有断字逻辑 - 若必须兼容 IE11，建议把
hyphens相关样式单独抽到@supports (hyphens: auto)块里，避免污染老浏览器解析
真正难的不是写对那行 hyphens: auto，而是确保整个链条：服务端输出 lang → 内容确实是可断英文 → 浏览器有对应词典 → 用户没禁用断字功能。任意一环断裂，它就静默失效。
