优先使用 hyphens-auto 配合 lang 属性实现语义化断词，不支持时 fallback 到 break-words；禁用 break-all 以防破坏中文可读性，响应式场景按断点组合策略。
长单词不换行导致容器溢出怎么办
直接加 break-words 就能解决多数场景下的强制断行问题，但它只在单词超出行宽时才在任意位置切断，不考虑语义或拼写规则——比如 "supercalifragilisticexpialidocious" 会被切成 "superca- + "lifragilis- 这类生硬片段。
什么时候该用 hyphens 而不是 break-words
hyphens 启用浏览器原生连字符断词（需配合语言属性），更符合排版习惯，但有明显限制：
- 必须设置
lang属性（如<p lang="en"></p>），否则 Firefox/Chrome 都不生效 - Safari 默认启用
hyphens: auto，Chrome 和 Firefox 需显式声明hyphens-auto（Tailwind v3.4+ 才支持） - 中文、日文等无连字符语言下
hyphens完全无效 - 对短单词（如
"JavaScript"）可能不触发断词，而break-words仍会切
break-words 和 hyphens-auto 能一起用吗
可以，且推荐组合使用：先让 hyphens-auto 在语义合理处加连字符，再用 break-words 作为兜底。但要注意顺序和兼容性：
- Tailwind 中类名顺序不影响 CSS 优先级，但渲染行为依赖浏览器对
hyphens的支持程度 - 在不支持
hyphens的环境（如旧版 Chrome），break-words会单独生效 - 避免同时写
break-all——它会在任意字节间断行（包括中文字符中间），破坏可读性 - 示例写法：
class="hyphens-auto break-words"，配合<p lang="en"></p>
响应式断行策略怎么写
长单词在小屏更易溢出，但连字符在窄容器中可能过于频繁。Tailwind 支持按断点控制：
-
sm:break-words md:hyphens-auto：小屏强制断，中屏起启用连字符 - 注意
hyphens的响应式变体（如md:hyphens-manual）需 Tailwind v3.3+，且仅影响断词方式，不解决无连字符语言问题 - 对纯数字字符串（如长 UUID：
"a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8"），hyphens无效，只能靠break-words或break-all（慎用）
真正麻烦的是混合内容：中英文混排 + 数字 + 连字符分隔符。这时候别只盯着类名，先确认 lang 是否正确，再看是否要对特定元素（如 <code>）禁用断行——whitespace-nowrap 比强行断更安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
