hyphens: auto 在 ios safari 上常失效，因需同时满足 lang 属性显式声明、ios 15.4+、系统字体及单词≥7字符；否则静默不生效。
hyphens: auto 在移动端（尤其 Safari）基本不可靠，除非你同时满足 lang 属性、系统字体、iOS 15.4+ 且单词 ≥7 字符——漏掉任一条件就静默失效。
hyphens: auto 在 iOS Safari 上为什么经常不生效
不是你 CSS 写错了，而是 Safari 对 hyphens: auto 的启用门槛极高：
- 必须显式声明
lang="en"（或lang="en-US"）在具体元素上，不能只靠继承——React/Vue 动态渲染时容易丢失 - iOS 15.4 是分水岭：更早版本即使写了也完全忽略
hyphens: auto，连前缀-webkit-hyphens: auto都无效 - 必须用系统字体（如 San Francisco），
@font-face引入的字体若未内嵌 Unicode 连字符表（U+2010 或软连字符 U+00AD），浏览器直接跳过断词 - 单词长度低于 7 字符（如 “testing”）通常不会触发，Safari 默认只对“明显长词”启用算法
真正能落地的移动端英文换行方案
别把 hyphens 当主力，它只是锦上添花。核心防线是 overflow-wrap: anywhere + max-width：
-
overflow-wrap: anywhere在 Chrome 107+、Firefox 109+、Safari 16.4+ 已稳定支持，会主动在容器撑满时断行，不依赖空格、不查字典、不切语义（如https://example.com/very-long-path会在/处自然断，而非硬切exam-ple） - 必须配
max-width（哪怕设为100%），否则浏览器认为“还有空间”，根本不触发断行逻辑 - 兼容 Safari 15.4 以下可降级：加一行
word-break: break-word（注意这不是标准值，但实测比break-all更克制） - 对中英混排或带数字的型号（如
XPS139000FHDPLUS），直接放弃hyphens，用word-break: break-all+min-width: 0（防止 flex 子项锁死宽度）
hyphens 和 word-break 同时写会发生什么
它们互斥：word-break: break-all 一旦存在，hyphens 会被浏览器完全忽略——CSS 解析器优先执行暴力断词逻辑，连字符根本没机会介入。
- 调试时如果发现
hyphens: auto没效果，先检查 computed styles 里有没有word-break相关声明 - 不要为了“保险”同时写两者；要语义化断词就只留
hyphens+lang+ 系统字体；要兜底防溢出就用overflow-wrap: anywhere -
hyphens: manual是唯一安全的 fallback：在源文本里插零宽连字符（），比如把antidisestablishmentarianism改成antidisestablishmentarianism，所有浏览器都认
最常被忽略的一点：hyphens 不是排版开关，它是浏览器调用本地词典的 API。没有语言标记、没有对应字典、没有字体支持，它就等于没写——这点在跨端动态内容里尤其致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
