hyphens: auto在Chrome/Firefox/Safari中支持差异显著：Chrome需v80+且依赖系统词典与lang声明；Firefox支持最稳定；Safari（尤其iOS）要求iOS 15.4+、系统字体及显式lang，缺一即静默失效。
hyphens: auto 在 Chrome/Firefox/Safari 中的实际支持差异
Chrome 从 v80 开始支持 hyphens: auto，但仅当系统有对应语言词典（如 en-US）且页面显式声明了 lang 属性时才启用；Firefox 支持最稳，只要 lang="en" 存在、字体含连字符字形，基本就能看到效果；Safari（尤其 iOS）最苛刻——iOS 15.4 是硬门槛，低于此版本直接忽略，且必须用 San Francisco 等系统字体，@font-face 引入的 Web Font 若没嵌入 U+2010 或 U+00AD，连字符就不会渲染。
为什么写了 hyphens: auto 却完全没反应
不是代码写错了，而是以下任一条件缺失就会静默失效：
-
lang="en"没写在具体文本元素上（比如只写了<html lang="en">，但<p>里没继承或没重申） - 用了自定义字体但未确认其包含连字符字形（可在开发者工具「Computed」面板看 font-family 实际加载的是哪个，再查该字体是否支持 U+2010）
- 同时写了
word-break: break-all或overflow-wrap: break-word—— 浏览器会优先执行暴力断行逻辑，跳过 hyphens - 单词长度
Tailwind 中 hyphens-auto 类怎么用才不翻车
Tailwind v3.4+ 才内置 hyphens-auto，但它本身不解决 lang 和字体问题。实际使用时必须：
- 配合
<p lang="en">这类显式语言标记，不能只靠全局lang - 避免和
break-all同时出现，否则hyphens-auto被无视 - 响应式降级推荐写法：
sm:break-words md:hyphens-auto—— 小屏保底强制断，中屏起尝试语义断词 - 对纯数字串（如 UUID）、中英混排内容，
hyphens-auto无效，得靠break-words或服务端预插
真正能落地的兜底方案是什么
别把 hyphens 当主力，它只是锦上添花。生产环境必须依赖更可控的组合：
立即学习“前端免费学习笔记（深入）”；
- 首选
overflow-wrap: anywhere：Chrome 107+、Firefox 109+、Safari 16.4+ 已稳定支持，会在 /、-、_ 等符号处自然断行，不切单词内部，也不依赖词典 - 必须配
max-width: 100%，否则浏览器认为“还有空间”，根本不触发断行 - 兼容老 Safari（15.4 以下）：加
word-break: break-word（注意这不是标准值，但实测比break-all更克制） - 对
<code>或<pre>块，一律禁用hyphens，它们会破坏可复制性
最常被忽略的一点：hyphens 不是 CSS 渲染开关，它是浏览器调用本地词典和字体字形的协作结果。调试时先看 computed styles 里 hyphens 是否真的算出 auto，再检查 lang、字体、单词长度三个硬条件有没有全满足。
