hyphens: auto在中文网页中完全无效，这是CSS规范明确限定的行为，仅对en、de、fr等有内建断字词典的语言生效；中文、日文、韩文等CJK语言因无音节级断点词典支持，无论lang设置、字体或容器宽度如何均不触发。
hyphens: auto 在中文网页里根本不会触发断字，这不是 bug，是 CSS 规范明确限定的行为。 它只对有内建断字词典的语言（如 en、de、fr）生效，中文、日文、韩文等 CJK 语言默认不参与 hyphens: auto 的自动分析——无论你加多少前缀、换什么字体、设多宽容器，都无效。
为什么 lang="zh" 也救不了 hyphens: auto
浏览器的 hyphens 实现依赖两层匹配：一是 lang 属性值必须精确对应内置词典标识（如 lang="en"、lang="de"），二是该语言词典本身支持音节级断点。中文没有这类词典支持，lang="zh" 或 lang="zh-CN" 只会影响字体回退、引号样式等，对 hyphens: auto 完全无响应。
- Safari 15.4+ 和 Chrome 88+ 虽然支持
hyphens: auto，但仅限于已实现断字逻辑的语言；中文不在其中 - Firefox 对中文同样无视
hyphens: auto，连-moz-hyphens: auto都静默忽略 - 试图用
unicode-range或自定义字体“模拟”中文断字，属于方向错误——它控制字形加载，不提供断词规则
中文长单词/无空格串该用什么替代方案
面对一长串英文、数字、URL 或混合内容（如 "XPS139000FHDPLUS"、"https://example.com/very/long/path"），应放弃 hyphens，改用语义更匹配的断行机制：
-
overflow-wrap: break-word：优先保持单词完整，仅在实在塞不下时才断，对中英混排友好 -
word-break: break-all：暴力按字符切，适合纯 ID、token、路径等无语义场景 -
white-space: pre-wrap+<wbr>：对可控内容（如后台返回的型号字段），提前插入软换行点 - 服务端注入零宽空格（
）：比前端 JS 注入更可靠，避免渲染时机问题
别被“lang 全局设置”骗了，动态内容要单独处理
React/Vue 项目中，即使 <html lang="en"> 写得再规范，组件内异步加载的英文段落仍可能失效——框架生成的文本节点不继承 lang，且 dangerouslySetInnerHTML 或 v-html 会绕过语言上下文推断。
立即学习“前端免费学习笔记（深入）”；
- 在承载英文内容的最外层容器上硬编码
lang="en"，例如：<div class="article-content" lang="en"> - 检查 DevTools Elements 面板，确认目标元素节点上真实存在
lang="en"属性，而非靠 JS 动态添加 - API 返回的长英文字段，建议后端直接插入
，前端只管渲染，不依赖浏览器断字
真正容易被忽略的是：hyphens 不是“换行开关”，而是“音节识别开关”。它需要语言、字体、浏览器三者同时点头，缺一不可；而中文从设计之初就没被纳入这个机制——接受这点，才能快速切到真正有效的方案上。
