line-clamp在tailwind中不直接生效，因其依赖-webkit-line-clamp且必须配合display:-webkit-box和-webkit-box-orient:vertical，同时需overflow-hidden及容器高度限制，三者缺一不可。

为什么 line-clamp 在 Tailwind 中不直接生效？

Tailwind 的 line-clamp 工具类（如 line-clamp-2）依赖 CSS 的 -webkit-line-clamp，但它不是独立属性，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能工作。如果你只加 line-clamp-2，而父容器是默认 display: block，截断会完全失效。

• 必须确保元素有明确的 display: -webkit-box（Tailwind 用 flex 或 block 都不行，得用 box 类，即 display: -webkit-box）
• -webkit-box-orient: vertical 由 line-clamp 类自动注入，但前提是 display 正确
• 父容器需有固定高度或最大高度限制，否则浏览器无法判断何时“该截断”

正确写法：三要素缺一不可

以下是最小可行结构，适用于 div、p 等块级容器：

<p class="line-clamp-3 overflow-hidden text-ellipsis [&]:display-[-webkit-box] [&]:-webkit-box-orient-vertical [&]:-webkit-line-clamp-3">
  这是一段很长的文字，超出三行时应该被省略号截断……
</p>

更推荐使用标准组合（Tailwind v3.3+ 内置支持）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• line-clamp-3（自动带 -webkit-box 和 -webkit-box-orient）
• overflow-hidden
• text-ellipsis（可选，增强语义，对视觉无额外影响）

但注意：Tailwind 默认只在 display: -webkit-box 下启用 line-clamp，所以你要确认你用的是支持该特性的版本（v3.0+），且未禁用 line-clamp 插件。

兼容性与 fallback 方案

-webkit-line-clamp 在 Safari、Chrome、Edge 中稳定，但Firefox 完全不支持（截至 Firefox 128）。如果你必须支持 Firefox，不能只靠 CSS 截断：

• 服务端截断（最可靠，但失去响应式弹性）
• JS 方案（如 clamp.js 或自写逻辑）：监听容器宽度/行高，动态计算字符数或使用 getClientRects()
• 使用 display: -webkit-box + @supports 做渐进增强：

@supports not (-webkit-line-clamp: 2) {
  .line-clamp-2 {
    display: block;
    height: 3.5rem; /* 粗略估算 2 行高度 */
    overflow: hidden;
  }
}

常见踩坑点

• line-clamp 对 inline 元素无效——必须是块级或 -webkit-box
• 父容器若设了 height（非 max-height），可能导致文字被硬裁切、省略号不显示
• Flex 容器子元素直接用 line-clamp 通常失败，因为 flex item 默认不是 -webkit-box；应在外层包一层 div 并应用截断类
• 使用 text-sm 等字号类后，line-clamp-2 的实际行高会变，但截断逻辑不变——省略仍按渲染后的行数算，无需手动调参数

Firefox 不支持这件事，很多人上线后才发现用户反馈“文字没截断”，建议在 CI 中跑一次简单视觉回归，或至少在本地用 Firefox 打开检查。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！