hyphens: auto 仅在满足语言标记（如 lang="en"）、支持断字的字体及对应浏览器版本（chrome/edge ≥80、firefox 全面支持、safari 不稳定）三重条件下生效，中文环境基本无效。
hyphens属性在哪些浏览器里真正起作用
Chrome 和 Edge 从 v80 开始支持 hyphens: auto，但仅限于启用了对应语言的 hyphenation dictionary 的情况；Firefox 一直支持较好，只要指定了 lang 属性且系统有词典（如 en-US）；Safari 在 macOS/iOS 上依赖系统级断字支持，hyphens: auto 表现最不稳定——尤其在中文混排英文长单词时经常完全不生效。
- 必须显式设置
lang="en"（或其他支持断字的语言）在父元素或自身上，否则 Firefox/Chrome 都会忽略hyphens: auto - 中文 HTML 中直接写
hyphens: auto对中文字基本无效（中文本身无连字符规则），别指望它帮“超长英文URL”或“技术术语”自动拆分 - 移动端 Safari 对
hyphens的支持存在缓存 bug：改了 CSS 后可能要强刷或切后台再回来才生效
为什么写了hyphens: auto却没看到连字符
最常见原因是缺少语言上下文或字体不配合。CSS 断字不是纯算法，它依赖浏览器内置的词典 + 字体提供的连字符 glyph（U+2010 或软连字符 ）。
- 检查是否漏了
lang属性：<p lang="en">supercalifragilisticexpialidocious</p> - 确认字体文件包含连字符字形：用
font-family: "Helvetica Neue", sans-serif;比自定义 WebFont 更容易触发（后者常缺 U+2010） - 避免和
word-break: break-all或overflow-wrap: break-word混用——它们会优先截断，绕过 hyphens 逻辑
hyphens值的三个选项实际效果差异
hyphens: none 是默认值，完全禁用断字；manual 只响应手动插入的 或 ；auto 才启用浏览器自动断字，但前提是满足语言、字体、渲染引擎三重条件。
-
hyphens: manual最可控：在 “resource” 中插入后，只在换行点显示连字符，适合关键术语防误断 -
hyphens: auto不会改变 DOM 结构，也不影响复制粘贴内容（连字符是渲染层添加的） - 不要对
<code>或<pre class="brush:php;toolbar:false;"></pre>块设hyphens: auto——代码里出现连字符会破坏可读性和可复制性
替代方案：当hyphens不工作时怎么救急
如果目标是防止超长英文单词撑破容器，hyphens 失效时更可靠的是组合使用 overflow-wrap 和 word-break，但要注意语义代价。
立即学习“前端免费学习笔记（深入）”；
- 优先试
overflow-wrap: break-word：只在必要时断行，保留单词完整性，对 URL 友好 - 慎用
word-break: break-all：会把 “example” 拆成 “exa-” “mple”，阅读体验差，仅适合日文/韩文混排或调试场景 - 服务端预处理仍是高保真解法：用 ICU 库提前在单词内插入
，比纯 CSS 更稳定，但增加构建复杂度
lang 属性没传下去，或者字体文件根本没带连字符字形。 
