hyphens: auto没反应是因为浏览器未启动断字引擎，必须同时满足四个条件：显式声明有效lang（如lang="en"）、使用含U+2010连字符的字体、容器宽度受限、内容为≥7字符的真实英文单词。
hyphens: auto 为什么没反应
不是 CSS 写错了，是浏览器根本没启动断字引擎——它需要语言、字体、容器宽度、浏览器支持四者同时到位，缺一不可。
- 没设
lang属性，或写成en-us（下划线）、EN（大写）、zh（中文），浏览器直接跳过 -
lang="en"必须显式写在目标元素上，比如<p lang="en">antidisestablishmentarianism</p>；靠<html lang="zh-CN">传递，在 Chrome/Safari 中大概率失效 - 内容本身不被识别为“可断英文单词”：超长 URL、Base64 字符串、邮箱地址（如
verylongemail@example.com）不会触发hyphens: auto - 中英文混排时整段设
lang="zh"，英文部分也基本无效——浏览器不会自动切分语言上下文
让 hyphens: auto 真正起作用的四个硬条件
少一个都静默失败，不报错也不提示。
- 元素上显式声明支持断字的语言：
lang="en"（Chrome/Edge ≥80、Firefox 全支持）、lang="de"或lang="fr"（需系统有对应词典）；lang="zh"、lang="ja"、lang="ko"均无效 - 使用含连字符字形（U+2010）的字体：系统字体如
"San Francisco"、"Segoe UI"更可靠；自定义 WebFont 若未内嵌连字符表，会直接跳过断字 - 容器宽度必须受限：不能是
width: auto且父容器无限宽；浏览器认为“不需要断”，就不会运行断字算法 - 单词本身要够长且可断：通常 ≥7 字符，且是真实英文单词（如
internationalization），不是拼接字符串（如XPS139000FHDPLUS）
hyphens: manual 怎么安全插入软连字符
比依赖自动更可控，尤其适合品牌词、技术术语或嵌入式英文片段。
- 用 HTML 实体
（即），不是普通短横-；它只在换行点渲染为可见连字符，复制文本时不会带进去 - 别在
<code>或<pre>里用——代码里出现resource会误导开发者，也破坏可读性 - 避免插在语义歧义处：比如
recover可能被理解为 “再覆盖” 或 “恢复”，需结合上下文判断 - CMS 或编辑器常过滤
，建议用 JS 动态注入，或构建时通过工具处理（如 PostCSS 插件）
hyphens 不工作时怎么兜底防溢出
别指望 hyphens 解决所有长文本问题，它只是排版增强项，不是布局保障。
立即学习“前端免费学习笔记（深入）”；
- 优先用
overflow-wrap: break-word（IE11 兼容）或overflow-wrap: anywhere（现代浏览器），防止容器被撑爆，尤其表格固定列宽场景 - 慎用
word-break: break-all：它会把example拆成exa-mple，阅读体验差，仅适合日文/韩文混排或调试 - 切勿混用
word-break: break-all和hyphens: auto——前者会直接覆盖后者，且破坏所有断字逻辑 - 若必须兼容 IE11，建议把
hyphens相关样式单独抽到@supports (hyphens: auto)块里，避免污染老浏览器解析
hyphens: auto，而是确保整个链条：服务端输出 lang → 内容确实是可断英文 → 浏览器有对应词典 → 用户没禁用断字功能。任意一环断裂，它就静默失效。 
