line-clamp能用，但必须手动安装插件、显式启用、配齐overflow-hidden等样式组合且重启服务；缺一不可，否则无效。
line-clamp 能用，但必须手动安装、显式启用、配齐样式组合——缺一不可，否则写了等于白写。
安装和启用 @tailwindcss/line-clamp 插件
插件从 Tailwind v3.3+ 开始支持，但默认不启用，也不会随 tailwindcss 自动安装。
必须执行两步：
- 运行
npm install -D @tailwindcss/line-clamp（或yarn add @tailwindcss/line-clamp --dev） - 在
tailwind.config.js的plugins数组中加入require('@tailwindcss/line-clamp')
改完配置后必须重启开发服务器——热更新不识别插件变更，这是新手卡住最久的环节。
插件默认提供 line-clamp-1 到 line-clamp-6，如需更多行数，可在 theme.extend.lineClamp 下扩展，例如：{ 7: '7', 8: '8' }。
立即学习“前端免费学习笔记（深入）”；
为什么加了 line-clamp-2 却没效果
因为 line-clamp-x 不是独立开关，而是依赖一组底层 CSS 属性协同生效。漏掉任意一个，浏览器就当它不存在。
必须同时满足以下条件：
-
overflow: hidden—— Tailwind 不会自动加，你得手动写overflow-hidden - 元素为块级（
block或inline-block），不能是inline；flex 子项若没设宽度也可能失效 - 父容器高度不能是
min-content或未设限，否则文本压根不“溢出”，省略逻辑不触发 - 避免直接在带
py-2、px-4等内边距的容器上用line-clamp，行高计算会被干扰，第三行可能“漏出来”
稳妥做法：套一层干净的 <div> 专做截断，内边距由外层控制。
动态设置 line-clamp 行数的正确方式
Tailwind 构建时扫描静态类名，line-clamp-${n} 这种字符串拼接写法不会被识别，最终 CSS 文件里根本没对应规则。
安全方案只有两个：
-
白名单（safelist）：在
tailwind.config.js中声明可接受的模式，例如{ pattern: /^line-clamp-[1-6]$/ }，适合行数范围确定的场景 -
内联样式：当值来自 API 或用户输入时，直接用
style写原生属性：style={{ display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: lineClamp, overflow: 'hidden' }}
别试图用 className={...} 拼接，那只会浪费调试时间。
Firefox 和响应式兼容要注意什么
Firefox 直到 v128+（2024 年中发布）才支持 -webkit-line-clamp，旧版 Firefox 完全无视该特性。
如果你的用户仍有稳定版 Firefox（比如企业内网环境），得准备降级方案：
- 服务端预截字符 +
text-ellipsis（仅单行） - 客户端 JS 库如
clamp.js，但有闪动、影响 SEO 风险
响应式用法没问题：line-clamp-2 md:line-clamp-4 lg:line-clamp-6 可以正常工作，但注意不同断点下 line-height 若差异大，可能导致视觉行数不一致——line-clamp 截的是“渲染行数”，不是像素高度。
真正容易被忽略的是布局污染：别把 line-clamp 和 padding、margin、flex 布局混在同一层元素上。它对盒模型很敏感，多一层干净 wrapper，少八分调试焦虑。
