chrome 中 hyphens: auto 不生效的根本原因是 lang 属性未正确声明或未被识别，必须显式设置符合 bcp 47 标准的 lang 值（如 en-us）、配合 -webkit-hyphens 前缀，且中文等语言不支持该特性。
hyphens: auto 在 Chrome 里不显示连字符，基本就是 lang 属性没生效，不是浏览器“不支持”，而是没触发条件。
Chrome 要求 lang 显式声明且语言可识别
Chrome（v120+）不会从内容自动推断语言，hyphens: auto 必须配合有效的 lang 值才能启动断字逻辑。常见错误包括：
-
<p>extraordinary</p>加了hyphens: auto但没设lang→ 完全不处理 -
写在根节点，但 React/Vue 渲染的文本节点未继承或未显式挂载 → 浏览器不认 -
lang="EN"或lang="en_US"（下划线）→ Safari 直接退回到无断字状态；必须用连字符格式如lang="en-US" - 服务端模板漏输出
lang，前端 JS 补 CSS 无效——DOM 上没有属性，CSS 就没作用对象
-webkit-hyphens 前缀不是“兼容写法”，而是 Chrome 的硬性依赖项
Chrome 对 hyphens 的实现依赖 -webkit-hyphens，仅写标准属性会静默失效。正确写法必须包含前缀：
text {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
注意：-ms-hyphens 在新版 Edge（Chromium 内核）中已不必要，但保留无害；-webkit- 缺失则 Chrome 不启用断字。
手动插入软连字符 或 \u00AD 是唯一可控方案
当无法确保 lang 可靠、或需精确控制断点（比如避免 “React” 断成 “Re-act”），hyphens: manual + 手动插入才是稳解：
- HTML 中写
<p>internationalization</p> - 或用 Unicode：
inter\u00ADna\u00ADtional\u00ADiza\u00ADtion - CSS 配合
hyphens: manual，只在位置响应，不影响复制粘贴内容 - 对品牌词、缩写、技术术语等关键文本，比
auto更可靠
别指望中文加 lang="zh" 触发 hyphens: auto
这是规范限制，不是 bug。所有主流浏览器对 lang="zh"、lang="ja"、lang="ko" 均忽略 hyphens: auto —— 汉字本身无连字符概念，浏览器词典也不提供断点规则。此时应换思路：
- 用
overflow-wrap: break-word防止溢出 - 对卡片类布局，务必加
min-width: 0（尤其flex/grid子项），否则断行根本不会发生 - 中文长串（如日志 ID、base64）优先用
word-break: break-all，但注意它会劈开单个汉字
真正卡住的从来不是那行 CSS，而是 lang 是否真实存在于目标元素上、字体是否携带连字信息、以及你是否在对 URL 或哈希值这类无语义字符串徒劳地调 hyphens。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
