hyphens: auto需lang属性、固定宽度或justify、css声明三者缺一不可；firefox默认支持，chrome/edge v88+需条件触发，safari仅支持manual；manual用更可控且兼容性好。
hyphens属性在Chrome和Firefox中的支持差异
现代浏览器对hyphens的支持并不统一：Firefox默认启用hyphens: auto（需lang属性配合），Chrome/Edge从v88起才支持，且必须开启text-align: justify或容器有明确宽度限制，否则不触发断字。Safari仅支持hyphens: manual（需手动插入）。
常见错误是直接写hyphens: auto却不设lang="en"，导致完全无效——浏览器无法判断单词语言规则，连字符词典不会加载。
必须配合的HTML和CSS条件
要让hyphens: auto真正生效，这三者缺一不可：
-
lang属性明确标注语言，如<p lang="en">...</p> - 容器有固定宽度（
width、max-width）或使用text-align: justify - CSS中声明
hyphens: auto，并建议加上-webkit-hyphens: auto和-moz-hyphens: auto前缀
示例：
p {
width: 300px;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
}
若容器是flex子项或inline元素，还需确保其white-space不是nowrap，否则连字符被强制禁用。
hyphens: manual时如何安全插入软连字符
当需要兼容Safari或旧版Chrome，或想精确控制断点时，用hyphens: manual配合（soft hyphen）最可靠。但注意：只在换行点渲染为可见连字符，其他位置完全不可见——这点比CSS方案更可控。
容易踩的坑：
- 不要用
-或‑（en dash）代替，它们会始终显示 - 在React/Vue中动态插入
需用{String.fromCharCode(173)}或实体，直接写可能被转义 - 长单词如
antidisestablishmentarianism建议在音节处插多个，比如antidisestablishmentarianism
性能与可访问性影响
hyphens: auto会触发浏览器内部的词典查表和音节分析，对超长英文段落（尤其含大量技术术语）可能轻微拖慢重排（reflow）。实测在1000+单词的<article></article>中，首次渲染延迟约3–8ms，后续滚动无影响。
更重要的是可访问性：屏幕阅读器通常忽略，但对hyphens: auto生成的连字符读法不一致——有些读作“dash”，有些跳过。因此，纯展示型文本可用auto，面向无障碍场景的内容建议改用manual并辅以ARIA说明。
真正难处理的是混合中英文段落：CSS连字符对中文无效，而英文单词夹在中文间时，lang属性若只标在父级，子级span lang="en"才管用——这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
