hyphens: auto 在窄屏下无效是因为需同时满足 lang 属性、浏览器支持对应语言字典、字体支持连字符三个条件；中文等无连字符语言及旧版 iOS Safari 均不生效。
hyphens: auto 为什么在窄屏下没效果
不是属性写错了，而是它根本没被激活——hyphens: auto 在绝大多数情况下静默失效，除非同时满足三个条件：元素有明确的 lang 属性（如 lang="en"）、浏览器支持该语言的断词字典、且当前字体支持连字符渲染。中文、日文、韩文等无连字符语言下，hyphens: auto 完全不生效；iOS Safari 15.4 之前在 contenteditable 区域也会跳过该规则。
怎么让 hyphens 在 Tailwind 中真正起作用
Tailwind v3.4+ 提供了 hyphens-auto 类，但它只是 CSS 的封装，不解决底层依赖问题。要让它落地，必须：
- 在对应 HTML 元素上显式声明
lang="en"（英文内容）或lang="de"（德文），不能只靠html根标签的全局设置 - 避免和
break-all同时使用——break-all会在字节级硬切，覆盖连字符逻辑 - 搭配
break-words作为降级：类名写成hyphens-auto break-words，Safari 不支持时自动 fallback 到字符级断行 - 注意响应式写法：比如
md:hyphens-auto sm:break-words，小屏优先保布局，中屏起启用语义断词
overflow-wrap: anywhere 比 hyphens 更可靠的原因
hyphens 是“锦上添花”，overflow-wrap: anywhere 才是“兜底刚需”。它不依赖语言、不查字典、不等空格，只要内容撑破容器就立刻断行，且断点更合理（如在 /、?、& 前，而非字母中间）。但必须配合 max-width 使用，否则浏览器认为“还有空间”，根本不触发。
兼容性已不是问题：Chrome 107+、Firefox 109+、Safari 16.4+ 全面支持。若需兼容 Safari 15.6，可加降级：
立即学习“前端免费学习笔记（深入）”；
text {
overflow-wrap: anywhere;
word-break: break-word; /* Safari 15.x fallback */
}中英文混排 + 数字串时别硬套 hyphens
像 v2.14.3-alpha、https://example.com/path/to/very-long-file.txt 或 UUID a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8 这类内容，hyphens 完全无效——它只对自然语言单词起作用。此时唯一靠谱的是：
- 用
overflow-wrap: anywhere控制整体行为 - 对纯技术片段（如
<code>）单独设white-space: pre-wrap+overflow-x: auto，比强行断行更安全 - 禁用
word-break: break-all，尤其在中文环境，它会把“你好”切成“你-好”，破坏语义
真正容易被忽略的，是断行策略必须和容器的 display 行为协同：inline 元素不响应 overflow-wrap，flex 子项默认 white-space: nowrap，这些都会让所有断行设置失效。先确认 display 和 white-space 状态，再调样式。
