hyphens: auto对中日韩无效，因浏览器未内置其断字规则；生效需同时满足合法lang、支持连字符的字体及系统版本要求，缺一即静默失效。
hyphens: auto 在移动端对中日韩等多语言文本完全无效，它只支持浏览器内置词典的少数语种（如 en、de、fr），且必须显式声明 lang 属性、使用支持连字符的字体、满足最低系统版本 —— 缺一即静默失效。
为什么 hyphens: auto 对中文/日文/韩文没反应
这不是写法问题，而是规范与实现层面的硬限制：Chrome、Firefox、Safari 均未为 lang="zh"、lang="ja"、lang="ko" 提供断字规则。即使你写了 <p lang="zh">超长无空格中文字符串</p> 并配 hyphens: auto，浏览器会直接跳过断字引擎，退回到默认换行行为。iOS Safari 甚至在 contenteditable 区域中，15.4 之前版本也完全忽略该属性。
移动端英文段落启用 hyphens 的三个强制条件
想让 hyphens: auto 在 iOS Safari 或 Android Chrome 上真正触发，必须同时满足：
-
lang="en"（或lang="en-us"）显式写在目标元素上，不能只靠继承 —— React/Vue 动态渲染时极易丢失 - 字体必须含连字符字形（U+2010 或软连字符 U+00AD）；
font-family: -apple-system, system-ui通常可用，但自定义 Web Font 若未嵌入 hyphenation table，就白搭 - iOS 需 ≥ 15.4，Android WebView 多数版本不支持
auto，部分仅认hyphens: manual
中英文混排时怎么避免误触发或中文被切
别给整个容器设 hyphens: auto，否则旧版 Edge 可能对中文插入短横线（U+2010），造成视觉污染。正确做法是语种隔离：
- 英文内容单独包裹：
<span lang="en">antidisestablishmentarianism</span> - CSS 写成：
[lang="en"] { hyphens: auto; } - 中文区域明确禁用：
[lang="zh"] { hyphens: none; }或[lang="zh"] { hyphens: manual; } - 避免和
word-break: break-all同时出现 —— 它会彻底绕过 hyphens 逻辑
真正可靠的移动端断行兜底方案
把 hyphens 当作排版增强项，而非布局保障。防溢出的主力应是：
-
overflow-wrap: anywhere：Chrome 107+、Firefox 109+、Safari 16.4+ 全面支持，会在/、.、-等符号前自然断，不依赖词典，也不需要lang - 必须搭配
max-width（哪怕只是max-width: 100%），否则浏览器认为“还有空间”，根本不触发断行 - Safari 15.x 降级用：
word-break: break-word（注意不是标准值，但实测比break-all更克制） - 对纯技术串（如 UUID、URL、型号码），直接放弃
hyphens，改用overflow-wrap: break-word+min-width: 0（尤其在 flex 子项中）
最常被忽略的一点：hyphens 不是开关，它是浏览器调用本地词典+字体字形的协同结果；而 overflow-wrap 才是真正可控的布局层手段。移动端优先保功能，再谈排版精致度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
