hyphens: auto 仅在支持 CSS Hyphenation 的浏览器中生效，如 Safari（macOS/iOS）、Firefox（默认启用）、Chrome/Edge（v88+，限部分语言且需正确 lang 属性），Android WebView 基本不支持。
hyphens: auto 在哪些浏览器里真正起作用
它只在支持 CSS Hyphenation 的浏览器中生效，不是所有现代浏览器都默认开箱即用。hyphens: auto 的实际行为高度依赖语言（lang 属性）、字体、渲染引擎和操作系统内置词典。
- Chrome 和 Edge 从 v88+ 开始支持，但仅限于部分语言（如 en-us、de、fr），且需页面声明
lang="en"，否则不触发 - Safari 支持最完整，macOS/iOS 上对英文、德文、法文等连字符断字效果稳定，前提是字体本身包含 hyphenation 数据
- Firefox 一直支持较好，但需要启用
layout.css.hyphens.enabled（默认 true），且仍受lang和字体限制 - 移动端 WebView 表现更不可靠——Android WebView 基本不支持，iOS WKWebView 可用但需测试具体 iOS 版本
为什么加了 hyphens: auto 却没看到连字符
最常见原因是缺失关键前提条件，而不是 CSS 写错了。
-
lang属性没设或设错：比如页面是英文内容但，浏览器直接跳过连字符逻辑 - 字体不支持断字：Google Fonts 大部分字体（如 Roboto、Inter）默认不含 hyphenation table；系统字体如 San Francisco（macOS）、Segoe UI（Windows）支持度更高
- CSS 优先级被覆盖：父元素写了
hyphens: none，或者用了white-space: nowrap/overflow-wrap: anywhere等冲突属性 - 文本太短或行宽太大：连字符只在“刚好差一两个字母就溢出”的临界情况下才插入，调试时可临时缩小容器宽度验证
hyphens 的三个值怎么选：auto / manual / none
别默认写 auto，它不是万能开关，不同值对应完全不同的控制粒度。
-
hyphens: auto：依赖浏览器自动判断，适合正文段落，但无法干预断点位置，也不保证每处都断 -
hyphens: manual：只在你手动插入软连字符或 Unicode\u00AD的地方断字，适合标题、术语、品牌名等需精确控制的场景 -
hyphens: none：彻底禁用，比靠word-break: keep-all更可靠，尤其在中日韩文本中避免意外断字 - 注意：
hyphens对中文、日文、韩文基本无效（它们没有连字符概念），此时应配合line-break: strict或text-wrap: balance（实验性）优化
连字符会影响性能或可访问性吗
影响极小，但有两个真实存在的副作用容易被忽略。
- 屏幕阅读器可能把
读成“soft hyphen”或静音跳过，导致发音不连贯；hyphens: auto生成的连字符不暴露为 DOM 节点，影响较小，但仍建议在 aria-label 或 title 中补全原词 - 服务端渲染（SSR）或静态生成时，
hyphens: auto是纯客户端行为，首屏 HTML 不含连字符，用户会看到“闪动”——先无连字符排版，再重绘加连字符，敏感场景可用hyphens: manual预置 - 打印样式表中连字符常失效，因为多数打印机驱动忽略 hyphens，如有 PDF 导出需求，得用 Puppeteer 等工具注入预计算的
hyphens 的核心不是“加符号”，而是让浏览器按语言规则做更自然的换行。它依赖的不是 CSS 本身多强大，而是你有没有给浏览器喂对语言、字体和上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
