hyphens: auto 不会自动生效，必须同时满足 lang 属性、字体支持、浏览器版本三要素，否则静默失效；常见原因包括 lang 缺失或错误（如 en_us）、自定义字体未内嵌连字符表、chrome/safari 要求单词≥7字符且 ios≥15.4，firefox 也需显式 lang="en"。
hyphens: auto 不会自动生效，必须同时满足 lang 属性、字体支持、浏览器版本三要素，否则静默失效。
为什么加了 hyphens: auto 却没断字
这不是 CSS 写错了，而是浏览器根本没启动断字引擎。常见原因有三个：
-
lang属性缺失或写错（比如en-us写成en_US，Safari 直接退回到none） - 用了自定义字体但没内嵌连字符表（U+2010 或软连字符支持），
hyphens会静默不工作 - Chrome/Safari 要求单词 ≥7 字符才触发，且 iOS 必须 ≥15.4；Firefox 虽宽松些，但也依赖
lang="en"显式声明
hyphens 和 overflow-wrap: anywhere 怎么配合用
二者解决的是不同层级的问题：hyphens 是语义化断词（插连字符），overflow-wrap: anywhere 是空间兜底（无条件断行）。实际中必须组合：
- 先设
max-width（或width），否则浏览器认为“还有空间”，根本不触发任何断行逻辑 - 对英文段落，写
hyphens: auto; overflow-wrap: anywhere;—— 前者优先在音节处插-，后者在连字符失败或纯数字串时兜底 - 避免混用
word-break: break-all：它会在中文中间切字，破坏可读性；break-all只适合<code>这类技术文本
中英文混排时怎么避免中文被误断
中文本身不支持 hyphens: auto，但旧版 Edge 等浏览器可能错误地给汉字加短横线（U+2010）。安全做法是隔离控制：
- 英文内容单独包裹，如
<span lang="en">internationalization</span>，再配[lang="en"] { hyphens: auto; } - 中文容器统一设
hyphens: none或hyphens: manual，不继承父级auto - 对含 URL、UUID 的混合字符串（如
https://a-b-c.example.com/very-long-path），hyphens无效，只能靠overflow-wrap: anywhere或服务端预插零宽空格（）
Tailwind 中怎么写才真正生效
Tailwind v3.4+ 才支持 hyphens-auto 类，但仅是语法糖，底层仍依赖原生规则：
- 必须配合
lang="en"（不能只靠，框架渲染可能覆盖） - 推荐写法：
class="hyphens-auto overflow-wrap-anywhere max-w-prose"，其中max-w-prose提供隐式max-width - 响应式场景慎用
sm:hyphens-auto：窄屏下频繁重排 + 连字符计算会多耗约 15% 布局时间，小屏标题建议改用whitespace-nowrap+text-ellipsis
最易被忽略的一点：hyphens 效果无法靠 DevTools 模拟器验证，必须在真机（尤其是 iOS 15.4+ Safari）上用真实长单词测试，否则上线后才发现静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
