hyphens: auto 非即写即生效，需同时满足 lang 属性显式设置、字体含 U+2010 字形、浏览器版本及引擎支持、操作系统词典可用等多重条件，缺一即失效。
hyphens: auto 不是“写了就生效”的属性，它本质是浏览器调用系统级断字词典的开关——语言标记（lang）错一位、字体缺一个连字符字形（U+2010）、浏览器版本低一档，它就静默失效。
lang 属性必须显式写在目标元素上，不能靠继承
Chrome 和 Safari（包括 iOS WKWebView）只检查当前元素的 lang 值，不向上查找父级或 <html>。即使页面根节点写了 <html lang="en">，动态插入的英文段落若没单独加 lang="en"，断字逻辑大概率跳过。
- ✅ 正确：
<p lang="en" style="hyphens: auto;">antidisestablishmentarianism</p> - ❌ 无效：
<div><p>antidisestablishmentarianism</p></div>（无lang） - ⚠️ 大小写敏感：
EN、en_US、en-us全部不触发；必须是en、de、fr等 BCP 47 小写短码
字体必须自带连字符字形，WebFont 很可能不支持
hyphens: auto 要渲染出短横线（-），字体文件里得有 U+2010（HYPHEN）或 U+00AD（SOFT HYPHEN）字形。多数 Google Fonts（如 Inter、Roboto）默认不含连字符表，@font-face 引入的自定义字体更常缺失这一项。
- ✅ 推荐用系统字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - ❌ 避免：
font-family: monospace;或未声明font-feature-settings: "hlig", "hist";的 WebFont - ? 验证方式：开发者工具 → Computed → 查看
hyphens是否计算为auto，再观察渲染结果中是否有实际短横线
浏览器支持不是“全有或全无”，而是分层启用
不同引擎对 hyphens 的启用条件差异极大，尤其在移动端：
立即学习“前端免费学习笔记（深入）”；
- Safari（WebKit）：iOS ≥ 15.4 才真正响应
hyphens: auto；需同时加-webkit-hyphens: auto前缀；且依赖系统是否启用了对应语言的拼写检查 - Chrome/Edge（Chromium）：v80+ 支持，但仅对
en、de、fr等少数语言启用词典；v89+ 还要求搭配overflow-wrap: break-word或text-align: justify才稳定触发 - Firefox：支持最宽松，只要
lang正确 + 字体支持，基本可用；但仍建议保留-moz-hyphens: auto兼容旧版 - Android WebView：几乎无视
hyphens，连-webkit-hyphens: auto都常被忽略
中文、日文、韩文等东亚语言无法使用 hyphens: auto 自动断词
这不是兼容性问题，而是规范限制：hyphens: auto 依赖浏览器内置断字词典，而 Chrome、Firefox、Safari 当前均未为 lang="zh"、lang="ja"、lang="ko" 提供任何断字规则。写上去不会报错，但会被直接忽略。
- 中英文混排时，必须隔离语种：
[lang="en"] { hyphens: auto; }+[lang="zh"] { hyphens: none; } - 别指望它处理 URL、Base64 或拼接字符串（如
XPS139000FHDPLUS）——这些不被视为“可断词” - 技术文档或 API 参数等关键术语，优先用
hyphens: manual+ 零宽连字符（），服务端注入比前端 JS 更可靠
最常被忽略的一点：hyphens 的生效链条极长——从 HTML 的 lang 值、到字体文件里的 U+2010 字形、再到操作系统是否装了 en-US 词典、最后到浏览器版本是否解锁该语言的断字模块。任意一环断开，它就安静地退回到默认换行行为，连 warning 都不抛。所以测试时永远不要只看桌面 Chrome，务必真机跑 iOS Safari 和 Android Chrome。
