hyphens: auto 仅在 Chrome 88+、Firefox 91+、Safari 15.4+（需明确 lang 且语言有内建词典）及 Chromium Edge 中有效；旧版 Edge 和 IE 完全不支持，中文等语言默认不触发自动断字。
hyphens属性在哪些浏览器里能用
Chrome 88+、Firefox 91+、Safari 15.4+ 支持 hyphens: auto，但前提是语言（lang 属性）明确且该语言有内建断字词典。Edge 基于 Chromium 后也支持，但旧版 Edge 和 IE 完全不支持，连 hyphens: manual 都无效。
常见错误现象：加了 hyphens: auto 没反应——大概率是没设 lang="en" 或类似属性，或者用了中文却指望它自动断字（CSS 规范里中文、日文、韩文默认不触发 hyphens: auto）。
- 必须配合有效的
lang值，比如<p lang="en"></p>、<div lang="de"> <li>中文网页即使加了 <code>lang="zh"，主流浏览器也不会自动断字，这是规范限制，不是 bug - Safari 对
hyphens的实现最严格，哪怕lang拼错一个字母（如en-us写成en_US），就直接退回到无断字状态 - 英文长单词多、行宽窄时，优先试
hyphens: auto+ 正确lang - 需要保留特定拼写或避免歧义（如 “re-cover” vs “recover”），用
hyphens: manual+ -
hyphens: none不是“关闭断字”的安全选项——它只禁用自动/手动断字，但不阻止浏览器用空格换行，对超长无空格字符串（如 URL、base64）无效 - 某些自定义字体（尤其精简版 Web Font）剥离了 OpenType 的 hyphenation 表，换用系统字体（如
font-family: -apple-system, BlinkMacSystemFont）常能立刻见效 -
hyphens只在块级容器有明确宽度时生效，如果父元素是display: inline或宽度为max-content，浏览器压根不触发断字逻辑 - 检查 computed styles，确认没被其他规则（比如重置库里的
* { hyphens: none }）覆盖 - 对中英混排段落，用
word-break: break-word或overflow-wrap: break-word处理长英文单词或 URL - 纯中文内容不需要断字，但若含长数字串（如订单号），加
word-break: break-all可强制在任意字符间换行（慎用，可能把“2024年”断成“202|4年”） - 想兼顾可读性和防溢出，推荐组合：
overflow-wrap: break-word; word-break: keep-all;—— 优先保词完整，仅在必要时断长串
hyphens: auto 和 hyphens: manual 怎么选
hyphens: auto 由浏览器根据语言规则和排版上下文决定在哪断，省心但不可控；hyphens: manual 只响应你手动插入的软连字符（ 或 Unicode \u00AD），适合关键位置精准控制，比如品牌名 “React” 不想断成 “Re-act”，就在中间插一个 。
为什么设置了 hyphens 还是不断字
除了 lang 缺失，还有三个高频原因：字体不支持连字信息、元素宽度未限定、CSS 优先级被覆盖。
立即学习“前端免费学习笔记（深入）”；
中文场景下怎么模拟断字效果
CSS 的 hyphens 对中文无意义，但真实需求常是“防止超长英文/数字串撑破容器”。这时靠的是更底层的换行控制：
真正难的不是加哪条 CSS，而是得先分清：你遇到的是语言断字问题，还是容器溢出问题。前者看 lang 和浏览器支持，后者根本不用碰 hyphens。
