hyphens: auto在中文网页中基本无效，因中文无连字符规则，且需同时满足lang属性（如lang="en"）、支持连字符的字体、限定容器宽度三条件才可能生效。
hyphens: auto 在中文网页里基本不起作用，别指望它自动拆分英文单词或 URL —— 这不是你写错了，是浏览器根本没启动断字引擎。
为什么加了 hyphens: auto 没反应
最常见原因就三个：没设 lang、语言不匹配、字体缺连字符字形。
-
lang必须显式写在元素上（比如<p lang="en"></p>），不能只靠传递给子级英文段落 - Safari 对
lang值极其敏感：写成en-us（带下划线）或EN（大写）都会直接失效 - 自定义 WebFont 如果没打包 U+2010（连字符）或没启用 OpenType
liga/hlig特性，Chrome/Firefox 也可能跳过断字 - 元素宽度未限定（比如
width: auto且父容器无限宽），浏览器认为“不需要断”，hyphens就不触发
hyphens: manual 怎么安全插入软连字符
手动控制比依赖自动更可靠，尤其对品牌词、技术术语或嵌入式英文片段。
- 用 HTML 实体
（即），不是普通短横-；它在换行点才显示，复制时不会带进去 - 不要在
<code>或<pre class="brush:php;toolbar:false;"></pre>里用 —— 代码里出现resource会误导开发者，也破坏可读性 - 避免插在易歧义位置：比如
recover（意为“再覆盖”）和recover（意为“恢复”）拼写相同，但语义不同 - 编辑器里粘贴含
的文本时，有些 CMS 会自动过滤掉，建议用 JS 动态注入或构建时处理
中英文混排时怎么让英文部分断字、中文部分正常换行
关键在于分离语言上下文，而不是给整段加 hyphens: auto。
- 给英文片段单独包裹一层，比如
<span lang="en" class="hyphenated">supercalifragilisticexpialidocious</span>，再配 CSS：.hyphenated { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } - 中文部分禁用
hyphens，改用word-break: break-all或更温和的overflow-wrap: break-word，避免撑破容器 - 不要同时设
hyphens: auto和word-break: break-all—— 后者优先级更高，直接绕过连字符逻辑 - 移动端 Safari 有缓存 bug：改完 CSS 后可能要强刷或切后台再回来，否则看不到效果
替代方案：当 hyphens 不可用或不生效时怎么办
自动连字符不是万能解，尤其面对 base64、长 URL、无空格 hex 值这类字符串。
-
overflow-wrap: break-word是最常用兜底：只在整词放不下时才断，视觉干扰小 -
word-break: break-all确实能填满容器，但会把example拆成exa-+mple，阅读体验差，仅适合调试或日/韩文环境 - 对超长 URL，更推荐用
text-overflow: ellipsis+white-space: nowrap截断，或后端预处理加 -
hyphens: none并不能阻止无空格字符串溢出，它只禁用连字符，不干预换行策略
真正难的不是写对那几行 CSS，而是判断什么时候该信浏览器、什么时候该自己插 、什么时候干脆换策略 —— 尤其当设计稿要求“右对齐+两端对齐+无溢出”同时成立时，hyphens 往往只是拼图一角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
