hyphens: auto是唯一按音节断行的标准方案，需同时满足显式lang属性（如lang="en"）、支持连字符的字体、固定宽度容器及浏览器词典支持，缺一不可。
英文单词按音节断行需要浏览器原生支持，hyphens 是唯一标准方案
HTML 本身不提供音节识别能力，CSS 的 hyphens 属性是目前唯一被主流浏览器（Chrome 82+、Firefox、Safari）支持的、真正按语言规则做音节断行的机制。它不是“强制切字”，而是调用系统或浏览器内置的词典与断字算法，在合法音节边界插入软连字符（）并触发换行。
关键前提是：必须显式声明语言，否则浏览器无法启用对应词典。
-
lang属性必须设对，例如：<p lang="en">...</p>或在<html lang="en">根节点声明 - CSS 中启用：
p { hyphens: auto; }（auto是唯一有效值，manual和none不参与音节断行） - 需配合固定宽度容器（
width或max-width），否则无折行触发条件 - 部分浏览器（如旧版 Chrome）需开启实验性 flag（
chrome://flags/#enable-hyphenation），但 2026 年起已默认开启
hyphens: auto 在不同语言下的实际表现差异
音节断行效果高度依赖浏览器对 lang 值的词典支持程度。同一段英文，在 lang="en" 下能正确断在 in-ter-est，但在 lang="en-US" 或 lang="en-GB" 下可能更精准；而设成 lang="zh" 则完全不生效——中文无音节断点概念，hyphens 直接忽略。
- Firefox 对
en、de、fr支持最成熟，断点准确率高 - Safari 在 macOS 上依赖系统词典，
en稳定，es、it次之 - Chrome 在 Windows 上对非英语支持较弱，建议 fallback 到
overflow-wrap: break-word -
hyphens: auto对纯数字串、Base64、URL 无效——这些本就无音节结构，浏览器直接跳过
为什么不能用 word-break: break-all 或 overflow-wrap: break-word 替代
这两个属性根本不是为音节设计的：overflow-wrap: break-word 只在整词放不下时，从词尾开始折；word-break: break-all 则无视语义，在任意字符间硬切（比如把 international 断成 inter-nation-al，实际应为 in-ter-na-tion-al）。它们既不查词典，也不尊重语言规则，只是布局兜底手段。
立即学习“前端免费学习笔记（深入）”；
-
break-all在表格td中慎用：可能把 URL 断成https:/+/example.com，破坏可点击性 -
break-word对连续大写字母（如XMLHTTPREQUEST）无效，仍会溢出 - 两者都需搭配
width才生效，但即使满足，也和音节无关 - 若强行用
手动标注音节（如interest），效果取决于用户是否复制粘贴——粘贴后 变成普通连字符，语义被污染
调试 hyphens 是否生效的三个检查点
常见失效不是代码写错，而是环境链断裂。逐项确认：
- 检查 computed style 中
hyphens是否为auto，且元素有明确lang属性（DevTools → Elements → 查看属性） - 确认容器有
width或max-width，且值足够小以触发折行（例如设max-width: 120px测试长单词） - 在浏览器地址栏输入
about:config（Firefox）或chrome://settings/appearance（Chrome），确认未禁用排版相关 flag
真正容易被忽略的是：服务端返回的 HTML 若缺失 lang，或前端 JS 动态插入内容时没同步设置 lang，hyphens 就永远静默——它不会报错，也不会降级，只是彻底不工作。
