hyphens: auto 在 Chrome 中不显示连字符的根本原因是未触发断字逻辑，必须同时满足：显式声明符合 BCP 47 标准的 lang 属性（如 lang="en-US"）、使用含连字符字形（U+2010）的字体、容器宽度受限（如 max-width），三者缺一不可。
hyphens: auto 为什么在 Chrome 里不显示连字符
根本不是浏览器“不支持”，而是它压根没启动断字逻辑。Chrome（v120+）不会从文本内容自动推断语言，hyphens: auto 必须搭配有效的 lang 属性才能触发。
常见失效场景包括：
-
<p>supercalifragilisticexpialidocious</p>加了hyphens: auto却没设lang→ 浏览器直接跳过断字 -
<html lang="en">写在根节点，但 React/Vue 动态渲染的文本节点未继承或未显式挂载 → DOM 上实际没有lang属性 -
lang="EN"或lang="en_US"（下划线）→ Safari 和 Chrome 都会退回到无断字状态；必须用 BCP 47 标准格式，如lang="en-US"
字体不带连字符表，hyphens 就是摆设
就算 lang 正确，hyphens: auto 仍需字体提供 Unicode 连字符支持（U+2010 或软连字符 U+00AD），否则静默失败。
系统字体如 -apple-system（macOS/iOS）、"Segoe UI"（Windows）自带连字符表；但自定义 WebFont 若未内嵌，就完全不工作。
立即学习“前端免费学习笔记（深入）”；
验证方式：
- 打开 DevTools → Elements 面板 → 确认目标元素有
lang="en" - 切换到 Computed 样式 → 查看
font-family对应字体详情中是否含 “hyphenation” 或 “Unicode ranges” 字段 - 临时切回
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI"，看是否立刻出现连字符
不同平台底层断字引擎差异太大
hyphens: auto 不是纯 CSS 行为，它依赖操作系统级断字引擎和词典：
- macOS：Safari 直接调用 ICU 引擎 + San Francisco 字体的 hyphenation table
- Windows：Chrome/Edge 默认走 DirectWrite，但只对
en-US、de等少数语言启用词典，且要求字体含 U+2010 字形 - iOS：iOS 15.4+ 才开始支持，且仅限
lang="en"或lang="fr"等硬编码语言，lang="en-GB"可能被忽略 - Android：WebView 几乎无视
hyphens，连-webkit-hyphens: auto都不响应
真正可靠的兜底方案不是加前缀，而是换策略
hyphens 是排版增强项，不是布局保障。当它在某平台静默失败，硬加前缀或换字体收效甚微，不如改用语义更明确的替代方案：
-
overflow-wrap: break-word：只在必要时断行，不插连字符，兼容性拉满（IE11+、所有移动端） -
word-break: break-word（注意：这是旧写法，实际应写overflow-wrap: break-word） - 中英混排或技术文档场景，优先用
overflow-wrap: break-word而非word-break: break-all，后者可能破坏单词可读性
最常被忽略的一点：容器必须设 width 或 max-width，hyphens 在无限宽环境下静默不触发 —— 这个限制连很多资深前端都会漏掉。
