hyphens属性在Chrome 88+、Firefox 6+、Safari 5.1+中支持，但旧版Edge和iOS Safari 12及更早版本不支持auto值；需配合lang属性、overflow-wrap等才能生效。
hyphens属性在哪些浏览器里能用
Chrome 88+、Firefox 6+、Safari 5.1+ 支持 hyphens，但 Edge（旧版）和 iOS Safari 12 及更早版本不支持自动断词（auto 值）。实际项目中若需兼容老设备，得先查目标用户 UA 或加降级处理。
hyphens: auto 不起作用的常见原因
即使写了 hyphens: auto，英文也不会自动加连字符折行，通常因为以下几点：
-
lang属性缺失或错误：必须为元素显式声明语言，例如，否则浏览器无法调用对应语言的断词规则 - 未设置
word-break或overflow-wrap配合：仅靠hyphens不会强制换行，它只在自然断行点（如空格、连字符位置）插入软连字符；若单词超长又无空格，需搭配overflow-wrap: break-word或word-break: break-word - CSS 作用域被覆盖：父级设置了
hyphens: none，或使用了!important干扰，子元素不会继承auto - 字体或渲染引擎限制：某些 Web 字体缺少断词表（hyphenation patterns），或系统未启用对应语言支持（如 macOS 的「英文（美国）」断词数据未加载）
正确写法与最小可运行示例
下面这段 CSS + HTML 能让长英文单词在支持环境下自动加连字符折行：
p {
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
}
对应 HTML 必须带语言标记：
<p lang="en">This paragraph contains a verylongwordthatmightneedhyphenation.</p>
注意：-webkit- 和 -moz- 前缀目前仍建议保留，尤其针对 Safari 15.4–16.4 中部分 hyphens: auto 失效的问题。
hyphens 的三个值怎么选
hyphens 接受三个值，行为差异直接影响是否真能“看到”连字符：
-
none：禁用所有连字符，哪怕单词溢出容器也不拆分（等价于没设该属性） -
manual：只响应手动插入的软连字符（或 Unicode\u00AD），适合精确控制，但维护成本高 -
auto：由浏览器根据lang和当前字体决定是否插入软连字符；但它不保证一定生效——比如单个超长单词无空格时，仍需overflow-wrap: break-word触发换行，否则连字符根本没机会显示
真正影响视觉效果的，是 hyphens: auto 和换行策略的组合，不是 hyphens 自身单独起效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
