hyphens属性需lang与hyphens:auto共用才生效；chrome/edge≥80、firefox全支持，safari依赖系统词典；none禁用所有连字符，manual仅响应/wbr，auto兼顾自动与手动断字；注意性能开销及pdf导出不支持。
hyphens属性在哪些浏览器中能用
Chrome 和 Edge 从版本 80 开始原生支持 hyphens，但仅限于启用 lang 属性且对应语言有内建断字规则时（如 lang="en"、lang="de"）；Firefox 一直支持，包括对英文的自动连字符；Safari 仅在 macOS/iOS 的 WebKit 中支持，且依赖系统语言词典——这意味着即使写了 hyphens: auto，若用户系统未启用对应语言的拼写检查，实际不会断字。
不支持的场景下，hyphens 会被忽略，文本按默认方式断行（即只在空格或连字符处折行），不会报错，也不会降级出警告。
必须同时设置lang和hyphens:auto才生效
hyphens: auto 不是独立开关，它依赖语言上下文。没有 lang 属性，浏览器无法判断该用哪套断字算法，直接跳过连字符处理。
- ✅ 正确写法：
<p lang="en" style="hyphens: auto;">The internationalization process requires careful planning.</p>
- ❌ 无效写法：
<p style="hyphens: auto;">...</p>
（缺lang） - ❌ 无效写法：
<p lang="zh">...</p>
（中文无标准连字符规则，hyphens: auto对中文文本无影响）
hyphens的三个值：none / manual / auto 的实际区别
hyphens: none 禁用所有连字符，包括你手动写的 （软连字符）；hyphens: manual 只响应 或 <wbr></wbr>，完全忽略自动断字；hyphens: auto 同时启用自动断字 + 尊重手动标记。
常见误操作是以为 在 auto 模式下会被覆盖——其实不会，它优先级更高，会覆盖自动断字位置。
- 想完全控制断点？用
hyphens: manual+ - 想让长英文单词（如
antidisestablishmentarianism）自动适配容器宽度？必须用hyphens: auto+lang - 用
hyphens: none时，失效，但<wbr></wbr>仍有效（它是 HTML 折行提示，与 CSS 无关）
性能和排版风险要注意什么
启用 hyphens: auto 会让浏览器在布局阶段调用语言词典进行分词，对含大量英文段落的长页面可能增加 layout 时间，尤其在低端移动设备上可感知卡顿。
更隐蔽的问题是断字位置不稳定：同一段文字在不同字号、不同容器宽度下，断点可能变化，导致动画或响应式切换时出现“文字跳动”。如果设计对行高/基线敏感（比如和 SVG 文本对齐），这种跳动会破坏视觉一致性。
还有一点常被忽略：PDF 导出工具（如 Puppeteer、wkhtmltopdf）基本不支持 hyphens，生成的 PDF 不会出现连字符，但网页里看着正常——上线前务必在目标输出格式里验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
