hyphens: auto 并非开箱即用，需同时满足显式精确的 lang 属性、含连字符字形的字体、及浏览器词典支持三条件，缺一不可；否则静默失效。
hyphens: auto 在多浏览器环境下几乎从不“自动”生效——它根本不是开箱即用的样式，而是对浏览器底层断字引擎的一次条件调用。只有当 lang、字体、渲染引擎三者同时满足苛刻条件时，连字符才可能出现在换行点。
lang 属性必须显式、精确、可继承
浏览器不会从文本内容推断语言，也不会无条件信任 的全局声明。React/Vue 动态插入的文本节点常丢失 lang，导致断字逻辑直接跳过。
- 必须在目标元素或其最近的、有宽度限制的父容器上写
lang="en-US"（注意：不是en_US或EN） - Safari 对大小写和分隔符极其敏感：
lang="en-us"有效，lang="en-US"也有效，但lang="en"在 iOS 15.4+ 才稳定；lang="en-GB"可能被 Safari 忽略 - 检查 DevTools Elements 面板，确认实际 DOM 节点上有
lang属性，而非仅靠 CSS 继承
字体必须自带连字符字形（U+2010）
自定义 WebFont（如 Google Fonts 的 Inter、Roboto）默认不含 hyphenation table，hyphens: auto 在这类字体下静默失败——不是报错，是压根不触发。
- 系统字体更可靠：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui; - 若必须用 WebFont，请确认该字体文件内嵌了 Unicode 连字符（U+2010）和软连字符（U+00AD）；可用 font-display 工具查看 “Unicode ranges” 字段是否含
U+2010 - 临时验证法：把
font-family换成"Helvetica Neue", sans-serif，如果连字符立刻出现，问题就出在字体
浏览器支持不是“有/无”，而是“有条件启用”
Chrome/Edge v88+、Firefox 全版本、Safari 16.4+ 都“支持” hyphens 语法，但启用断字逻辑的门槛完全不同：
- Chrome/Edge：需
lang+ 系统词典语言（仅 en-US、de、fr 等少数）+ 容器max-width+ 单词 ≥7 字符；Android WebView 基本无视 - Firefox：相对宽松，但若系统无对应语言词典（如 Linux 发行版未装
hyphen-en包），仍不生效 - Safari（iOS/macOS）：依赖 ICU 引擎 + San Francisco 字体表；iOS lang="en" 和
lang="fr"，且需强刷缓存才能看到更新后的连字符 - 别信
@supports (hyphens: auto)：它只检测 CSS 语法是否被识别，不验证语言/字体/词典是否就绪
别和 word-break / overflow-wrap 混用
只要存在 word-break: break-all 或 overflow-wrap: break-word，hyphens 就会被浏览器完全忽略——前者走暴力断裂路径，后者优先保障不溢出，连字符没机会介入。
- 调试时先清空所有
word-break和overflow-wrap声明，单独验证hyphens - 真正可靠的兜底方案不是加前缀，而是降级：用
overflow-wrap: anywhere（Chrome 107+/Firefox 109+/Safari 16.4+ 支持）配合max-width，它不插连字符，但在 /、-、_ 等符号处自然断行，语义更干净 - 对超长技术词（如
antidisestablishmentarianism），hyphens: manual是唯一可控方案：手动在源码中插入或零宽连字符
最常被忽略的事实是：hyphens 不是 CSS 渲染属性，它是浏览器向操作系统发起的一次“查词典”请求。你写的那行 CSS，本质是一张调用凭证——缺语言、缺字体、缺词典，凭证就作废。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
