<p>line-clamp 默认不生效是因为它是 WebKit 专属属性，Tailwind 不自动添加 -webkit- 前缀；需启用 @tailwindcss/line-clamp 插件，并满足 display: -webkit-box、-webkit-box-orient: vertical 和明确高度限制三个前提。</p>
line-clamp 在 Tailwind 中为什么默认不生效
因为 line-clamp 不是原生 CSS 属性，而是 -webkit-line-clamp 的简写，属于 WebKit 专属前缀属性，Firefox 和旧版 Edge 完全不支持；Tailwind 默认只生成标准属性，不会自动加 -webkit- 前缀，所以直接写 line-clamp-2 没反应。
实操建议：
- 必须启用
line-clamp插件：在tailwind.config.js的plugins数组里加上require('@tailwindcss/line-clamp') - 确保 PostCSS 配置中启用了
autoprefixer（Tailwind v3.3+ 默认包含，但自定义配置可能关掉） - 该插件只补
-webkit-box、-webkit-line-clamp和-webkit-box-orient，不解决 Firefox 兼容性问题
line-clamp 的三个必要前提条件
即使插件已启用，line-clamp 依然会静默失效——它对 DOM 结构和样式有硬性要求，缺一不可。
常见错误现象：line-clamp-2 加了但文本照常撑开容器，没省略号，也没截断。
立即学习“前端免费学习笔记（深入）”；
必须同时满足：
- 元素需设
display: -webkit-box（插件会自动加，但父级不能用flex或grid覆盖） -
-webkit-box-orient: vertical（插件自动加，但若手动写了flex-direction可能冲突） - 元素必须有明确高度限制或
max-height（仅靠line-clamp不够，浏览器需要“可溢出”的边界）
推荐写法：class="line-clamp-2 h-10" 或 class="line-clamp-2 max-h-10"，避免依赖父容器高度坍塌。
line-clamp-2 和 overflow-hidden 的组合陷阱
很多人以为加了 line-clamp-2 就万事大吉，结果发现末尾文字被粗暴裁切，没出现省略号（…）。
原因：省略号依赖 text-overflow: ellipsis，而 line-clamp 插件**不自动添加它**，且 text-overflow 对多行无效——它只对单行 white-space: nowrap 生效。
真正起作用的是 -webkit-box 模式下的隐式行为，但前提是：
- 元素不能设
white-space: nowrap（否则变成单行裁切） - 必须保持
word-break: normal或break-word，否则长单词（如 URL）会撑破限制 - 如果父容器有
overflow: hidden，要确认它没意外剪掉省略号所在行的底部像素（可加pb-0.5微调）
Firefox 下完全无替代方案？
是的。Firefox 不支持 -webkit-line-clamp，也无等效原生属性。所有“兼容 Firefox”的方案都是妥协：
- 服务端截断（最稳，但无法响应字体缩放或窗口 resize）
- JS 方案如
clamp.js或react-lines-ellipsis（增加运行时、有 FOUC 风险） - CSS
display: -moz-box曾存在，但早已被移除，现代 Firefox 彻底不认
实际项目中，多数团队选择接受 Firefox 下显示完整文本——毕竟省略号本质是视觉优化，不是功能刚需。如果必须统一，优先考虑后端预处理长度。
容易被忽略的一点：line-clamp 对中英文混排、CJK 字体、变体 emoji 的截断位置并不精确，有时会在行尾留一个孤立标点。这不是 bug，是 WebKit 渲染机制决定的，别花时间调。
