hyphens 属性在 Chrome 88+、Firefox 6+、Safari 5.1+ 及 Edge 88+（Chromium 内核）中真正可用，IE 完全不支持；必须配合 lang 属性（如 lang="en"）才能触发断词，且 auto 仅对字典内常用词有效，生僻词、缩写等通常不断。
hyphens 属性在哪些浏览器里真正可用
Chrome 88+、Firefox 6+、Safari 5.1+ 支持 hyphens，但 Edge（基于 Chromium 后）才从 88 版起支持；IE 完全不支持，且无 polyfill 可靠补救。实际项目中若需兼容旧版 Edge 或 IE，得放弃纯 CSS 方案，改用 JavaScript 库（如 hyphenopoly）或服务端预处理。
必须配合的语言声明才能触发连字
hyphens 不是“开箱即用”——它依赖浏览器对语言的识别。即使写了 hyphens: auto，若元素没明确声明语言，多数浏览器（尤其是 Chrome）会直接跳过断词逻辑。
- 必须设置
lang属性，例如：<p lang="en">supercalifragilisticexpialidocious</p> - CSS 中可配
html { lang: en; }，但更稳妥的是在 HTML 根元素写<html lang="en"> - Safari 对
lang="en-us"支持更好；lang="en"在部分 Chrome 版本下可能失效
auto / manual / none 的行为差异和陷阱
hyphens: auto 由浏览器查字典决定断点，但实际效果受字体、字号、行宽影响极大；hyphens: manual 则只响应 （软连字符）或 Unicode \u00AD，适合精确控制；hyphens: none 并非“禁用”，而是忽略所有连字提示（包括 ）。
- 不要在
hyphens: auto下手动插——两者混用可能导致重复连字符或渲染错位 -
hyphens: manual在 Firefox 中对响应最稳定；Chrome 有时需配合word-break: normal才生效 - 使用
时，确保 HTML 文档编码为 UTF-8，否则可能显示为乱码或实体字符本身
为什么有些单词就是不断、有些断得莫名其妙
根本原因在于浏览器内置字典覆盖有限：Chrome 和 Safari 的英文词典仅包含约 2–3 万常用词，生僻词、专有名词、缩写（如 API、URL）、带连字符的复合词（如 state-of-the-art）基本不会被自动断开。
立即学习“前端免费学习笔记（深入）”；
- 短单词（≤ 5 字符）通常不触发断词，这是浏览器的默认策略，不可配置
- 行末剩余空间小于一个字符宽度时，
hyphens: auto可能宁可溢出也不加连字符（尤其在font-size小、line-height紧的场景） - Flex/Grid 容器中的文本，若父容器设了
white-space: nowrap或overflow: hidden，会直接压制hyphens生效
hyphenopoly 加载完整字典，或者预生成带 的 HTML。 
