hyphens: auto 需语言（lang属性正确）、字体（含连字符表）、浏览器（版本及引擎支持）三者同时满足才生效，缺一不可；常见失效原因包括lang缺失/错误、字体不支持、浏览器限制或CSS冲突。
hyphens: auto 不是加了就生效的 CSS 属性，它需要语言、字体、浏览器三者同时“在线”才能触发断词。
为什么写了 hyphens: auto 却看不到连字符
最常见原因不是代码写错，而是浏览器根本没启动断词逻辑：
-
lang属性缺失或拼错：比如页面是英文内容但根元素是<html lang="zh">，或子容器漏设lang="en"；Safari 对lang值大小写和分隔符极其敏感（en-us有效，en_US就失效） - 字体不带连字符表：Google Fonts 的
Inter、Roboto默认不含 hyphenation data；系统字体如 macOS 的San Francisco、Windows 的Segoe UI支持更好 - 浏览器版本或引擎限制：Chrome/Edge 需 v88+，且仅对
en、de、fr等少数语言启用；Android WebView 基本不支持；iOS WKWebView 要求 iOS ≥ 15.4 - CSS 冲突：父级设了
hyphens: none，或同时用了white-space: nowrap、overflow-wrap: anywhere等会压制断词的属性
hyphens: auto 在不同浏览器里怎么写才真正起作用
前缀和条件必须匹配当前渲染引擎，不能只靠标准写法：
- Safari（WebKit）：必须加
-webkit-hyphens: auto，且lang值要精确（lang="en"或lang="en-us"），字体需含 hyphenation table - Chrome/Edge（Chromium）：v88+ 起支持，但需显式声明
lang+ 启用text-align: justify或overflow-wrap: break-word才更稳定 - Firefox：默认启用
layout.css.hyphens.enabled（值为true），但仍依赖lang和字体；可不加前缀，但建议保留-moz-hyphens: auto兼容旧版 - 不要指望
@supports (hyphens: auto)完全覆盖——它只检测语法支持，不检测语言/字体实际可用性
中英文混排时怎么避免中文被误断
中文没有连字符概念，hyphens: auto 对纯中文无效，但错误配置反而可能引发问题：
立即学习“前端免费学习笔记（深入）”；
- 别给整个页面设
hyphens: auto：中文容器继承后，旧版 Edge 可能插入 U+2010 短横线，造成视觉污染 - 隔离语种：英文内容用
<span lang="en">internationalization</span>包裹，再配 CSS[lang="en"] { hyphens: auto; } - 中文区域明确禁用：用
[lang="zh"] { hyphens: none; }或[lang="zh"] { hyphens: manual; }，防止意外继承 - 长 URL 或 base64 字符串不能靠
hyphens解决——它们需overflow-wrap: break-word或word-break: break-all
hyphens: auto 和 word-break 的关键区别在哪
这是语义与暴力的分界线，选错直接影响可读性：
-
hyphens: auto是音节级断词：浏览器查内置词典，按语言规则插连字符（如inter-na-tion-al-i-za-tion），需lang+ 字体支持 -
word-break: break-all是字符级截断：不管音节，直接按容器边界切（如internationa-lization），破坏单词识别，慎用于正文 -
overflow-wrap: break-word是兜底策略：只在单词超长溢出时才断，不断开正常单词，比break-all更安全，但不插连字符 - 调试时可临时缩小容器宽度验证效果——
hyphens只在“差一两个字母就溢出”的临界宽度下才出现连字符
真正难的不是写那行 CSS，而是让浏览器“认出这是哪种语言、该用哪本词典、配哪套字体”。漏掉 lang、用错字体、或在中文环境硬推 hyphens: auto，都会导致它静默失效。
