hyphens: auto 生效需语言、字体、容器宽度、浏览器支持四者同时满足；必须显式声明 lang="en"（大小写及区域码敏感），字体需含连字符字形，且需配合 overflow-wrap: break-word 使用。
写了 hyphens: auto 却没连字符？不是代码错了，是浏览器压根没启动断词引擎——它需要语言、字体、容器宽度、浏览器支持四者同时在线，缺一不可。
必须显式声明 lang="en"，不能靠继承
Chrome 和 Safari（包括 iOS）对 lang 属性极其敏感：即使 <html lang="en"> 已写，子元素如 <p> 仍需单独加 lang="en" 才大概率触发。写成 en-us（连字符）、EN（大写）、zh（错语言）都会静默失效。中文混排段落里，整段设 lang="zh" 后再给英文单词加 hyphens: auto，基本无效——浏览器不会自动切分语言上下文。
hyphens: auto 依赖字体自带连字符字形
就算语言和 CSS 都对，若字体不含 U+2010（连字符 glyph）或 hyphenation table，连字符也不会渲染出来。系统字体如 -apple-system、Segoe UI 通常支持；但多数 Google Fonts（如 Inter、Roboto）默认不嵌入断字数据。测试时避免用 font-family: monospace，等宽字体对连字符支持普遍较差。可在开发者工具的 “Computed” 面板里检查 hyphens 是否被计算为 auto，再看实际渲染是否有 -。
必须搭配 overflow-wrap: break-word 才真正生效
hyphens: auto 本身不强制换行，只在自然音节边界插入软连字符；若行末剩余空间小于一个字符宽度，浏览器可能宁可溢出也不加 -。因此必须组合使用：
立即学习“前端免费学习笔记（深入）”；
<p lang="en" style="hyphens: auto; overflow-wrap: break-word;"> supercalifragilisticexpialidocious </p>
注意：word-wrap 是别名，优先用标准名 overflow-wrap；word-break: break-all 会绕过 hyphens 逻辑，直接暴力截断，破坏可读性，不要混用。
浏览器支持差异极大，移动端尤其脆弱
iOS Safari（≥15.4）相对稳定，但存在缓存 bug：改完 CSS 后可能要强刷或切后台再回来才生效；Android Chrome（尤其旧版）和微信 X5 内核基本不响应 hyphens: auto；Firefox 虽支持较好，但仍依赖系统词典（如 en-US）。所以生产环境别指望它 100% 可靠——短单词（≤5 字符）、缩写（API、URL）、带连字符的复合词（state-of-the-art）、纯数字串（UUID）基本不断，这是浏览器内置词典覆盖有限导致的硬限制。
