line-clamp能用但需严格满足条件：必须配overflow-hidden、仅对块级元素生效、配置后须重启服务；漏任一条件均导致失效。
直接上结论：line-clamp 能用，但必须配 overflow-hidden、必须是块级元素、必须重启服务——漏掉任意一条，line-clamp-2 就等于没写。
为什么加了 line-clamp-2 却不生效
最常见原因是样式组合不全。浏览器原生的 -webkit-line-clamp 是个“条件触发器”，不是独立开关：
-
display: -webkit-box和-webkit-box-orient: vertical由插件自动注入，但仅当同时用了line-clamp-x类时才生效 -
overflow: hidden必须手动加，Tailwind 不会帮你补——这是新手踩坑率最高的地方 - 父容器不能是
min-content或高度未设限，否则文本压根不“溢出”，省略逻辑根本不会触发 - 如果元素本身带
py-2、px-4这类内边距，line-clamp的行高计算会被干扰，导致第三行文字“漏出来”
怎么正确配置 @tailwindcss/line-clamp
v3.3+ 才支持，且默认不启用，必须显式安装并注册：
- 运行
npm install @tailwindcss/line-clamp -D（或yarn add @tailwindcss/line-clamp --dev） - 在
tailwind.config.js的plugins数组里加入require('@tailwindcss/line-clamp') - 改完配置必须重启开发服务器——热更新不识别插件变更
- 插件默认提供
line-clamp-1到line-clamp-6，如需自定义，可在theme.lineClamp下扩展
line-clamp 在哪些场景会翻车
它不是万能胶，几个关键限制得心里有数：
- Firefox 用户需 v128+（2024 年中以后），旧版 Firefox 完全无视，得准备降级方案（比如服务端截字符 +
text-ellipsis） - 不能用在
inline元素上，inline-block或block才行；flex容器子项若没设width，也可能失效 - 配合
line-height使用时要小心：设line-clamp-2但line-height: 3，实际可能只显示 1 行半，视觉上像少了一行 - 频繁更新内容（如聊天消息流）时，重排开销略高于普通文本，因浏览器要反复测量盒模型
真正容易被忽略的是布局污染问题：别把 line-clamp 直接怼在带 padding 的容器上。稳妥做法是套一层干净的 div，让它只负责文本截断，内边距由外层控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
