NativeWind 仅完整支持 overflow-visible、overflow-hidden、overflow-scroll 三个类，其余 overflow-x/y 变体及 overflow-auto、overflow-clip 均仅 Web 可用。
line-clamp-2加了没反应？缺这5个条件
直接写 line-clamp-2 却没效果，不是 Tailwind 配置错了，而是浏览器原生机制没被满足。它依赖 -webkit-line-clamp，而这个属性必须同时满足：块级元素、display: -webkit-box、-webkit-box-orient: vertical、明确的 height 或 max-height、overflow: hidden。Tailwind 的 line-clamp- 类只生成 -webkit-line-clamp 和 overflow: hidden，其余全得手动补。
常见错误现象：line-clamp-3 加了但文本照常换行、无省略号；控制台没报错，样式完全没反应。
-
text-ellipsis必须显式加，Tailwind 的line-clamp-类不包含它 - 父容器不能是
flex或grid的直接子项——会覆盖-webkit-box布局 - 如果容器有
padding（比如py-3），截断可能失效：内边距干扰高度计算，建议把line-clamp-移到内部<p>上，而非带 padding 的外层<div>
不用插件，最简可行方案：@apply 补全
不装插件、不改配置，也能让 line-clamp-2 立刻生效。关键是在组件里用 @apply 把缺失的样式一次性写齐，调试直观、兼容性好。
示例（Vue/React 组件内）：
立即学习“前端免费学习笔记（深入）”；
.clamp-2 {
@apply block overflow-hidden text-ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
注意：-webkit-line-clamp 的值必须和类名数字一致（clamp-2 → -webkit-line-clamp: 2），否则行为不可预期。
- 别在
flex容器里直接给子元素加这个类，会被 flex 布局覆盖掉-webkit-box - 如果只截 1 行，优先用
truncate类，它更轻量、无需-webkit-前缀、全浏览器兼容
多处复用？装官方插件 @tailwindcss/line-clamp
项目里频繁用多行截断（比如卡片列表、评论摘要），又不想每个地方都写 @apply，就装插件。它会自动注入完整样式链，line-clamp-2 开箱即用。
安装后，在 tailwind.config.js 的 plugins 数组里加一行：
require('@tailwindcss/line-clamp')
插件生效后，line-clamp-2 就等价于：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
- 插件不解决
padding冲突问题——仍需避免把line-clamp-直接加在带内边距的元素上 - Firefox 不支持
-webkit-line-clamp，插件也无法让它生效；如需强兼容，得配 fallback 方案（比如max-height+::after渐变遮罩）
为什么 Firefox 里 line-clamp 失效？
因为 -webkit-line-clamp 是 WebKit/Blink 专属属性，Firefox（Gecko）根本不识别。这不是 Tailwind 或插件的问题，是浏览器引擎差异。
如果你的用户大量使用 Firefox，且设计要求严格显示省略号，就得准备降级方案：
- 用
max-height+line-height计算总高（例如max-height: 3.6em对应 3 行 × 1.2em 行高） - 配合
position: relative和::after伪元素模拟省略号（但要注意：当文本实际不足 3 行时，省略号仍会显示） - 真正需要语义截断（比如防爬虫、数据脱敏），CSS 层面做不到，必须用 JS 截字符串或服务端处理
容易被忽略的是：所谓“截断”，只是视觉隐藏，DOM 里文本还在，屏幕阅读器也能读到。这点在无障碍场景下尤其关键。
