hyphens: auto 不生效主因是语言标记、字体支持与浏览器版本未同时满足：需显式设置 lang="en"、使用含连字符表的系统字体（如 San Francisco）、Chrome/Safari 要求单词≥7字符且 iOS≥15.4，自定义字体须内嵌连字符表。
hyphens属性不生效的常见原因
直接写 hyphens: auto 却看不到断词效果，大概率不是 CSS 写错了，而是浏览器没“认出”这是英文文本，或者字体/语言环境不支持。Chrome 和 Safari 默认对英文启用断词需要同时满足：元素有明确的 lang="en" 属性、使用支持连字符的字体（如系统自带的 San Francisco、Segoe UI）、且单词足够长（通常 ≥ 7 字符）。
- 别依赖
html标签全局设lang—— 某些框架生成的 DOM 可能覆盖它，建议在具体容器上加lang="en" -
hyphens: auto在 Firefox 中对英文默认有效，但 Chrome / Edge 需要-webkit-hyphens: auto+lang双保险 - 自定义字体（如
@font-face引入的字体）若未内嵌连字符表（Unicode U+2010 或软连字符），hyphens会静默失效
英文长单词换行时 hyphens 和 word-break 的区别
hyphens: auto 是语义化断词：它只在音节边界插入连字符（如 “internationalization” → “inter-na-tion-al-i-za-tion”），需要浏览器内置词典支持；而 word-break: break-all 是暴力截断，不管音节，直接按字符切（“internationalization” → “internationa-” + “lization”），破坏可读性。
- 响应式卡片里放产品型号（如
"XPS139000FHDPLUS"）——用word-break: break-all更稳妥，因为这不是真实英文单词 - 新闻正文段落含 “antidisestablishmentarianism” 这类词——优先用
hyphens: auto，辅以lang="en"和系统字体 -
overflow-wrap: break-word是备选：它只在实在塞不下时才断，不主动插连字符，适合混合中英场景
React/Vue 项目中动态内容的 hyphens 失效问题
服务端渲染或异步加载的英文内容，如果 DOM 插入时 lang 属性还没挂载，或者文本节点被框架包裹成 Text 节点而非原生 TextNode，浏览器可能跳过连字符分析。
- 在组件根元素上硬编码
lang="en"，不要靠父级继承 - 避免用
dangerouslySetInnerHTML（React）或v-html（Vue）注入纯文本——它们绕过框架的 language 推断逻辑 - 长单词来自 API 时，在后端加零宽连字符（
）作为兜底，比如把"supercalifragilisticexpialidocious"改成"supercalifragilisticexpialidocious"
移动端 Safari 的 hyphens 兼容性陷阱
iOS 15.4+ 才真正支持 hyphens: auto 对英文生效，更早版本即使写了也当不存在。而且 Safari 对 lang 的识别比桌面版更严格：必须是 lang="en"，写 lang="en-US" 或 lang="en-GB" 都不触发。
立即学习“前端免费学习笔记（深入）”；
- 检测是否支持：
CSS.supports('hyphens', 'auto')返回false时，降级用word-break: break-word - 不要依赖
text-align: justify强制触发 hyphens —— Safari 下两者无因果关系 - 真机调试时，用 Web Inspector 查看 computed styles 里的
hyphens值，别信模拟器
hyphens 不是开关式功能，它依赖语言标记、字体能力、浏览器版本三者对齐。最容易被忽略的是：哪怕所有条件都满足，如果单词本身在浏览器词典里不存在（比如新造词、缩写、带数字的型号），连字符也不会出现。
