tailwind 中需手动启用 line-clamp 插件（v3.3+），配置 plugins: [require('@tailwindcss/line-clamp')] 并重启服务；使用时必须配合 overflow-hidden，且仅对块级元素生效，缺一不可。
line-clamp 在 Tailwind 中怎么用
Tailwind 本身不直接提供 line-clamp 工具类，它依赖浏览器原生的 -webkit-line-clamp，所以必须手动启用对应功能（从 v3.3 起支持），否则写了 line-clamp-2 也没效果。
默认安装的 Tailwind 不会自动开启该插件，需要显式配置：
- 确保使用的是 Tailwind CSS v3.3+
- 在
tailwind.config.js的plugins数组中加入require('@tailwindcss/line-clamp') - 重启开发服务器（改配置后热更新通常不生效）
启用后就能用 line-clamp-1、line-clamp-3 这类类名了——但注意：它只对块级元素生效，且必须配合 overflow-hidden 和 display: -webkit-box（Tailwind 会自动加）。
为什么加了 line-clamp 却没省略
最常见原因是元素缺少必要样式组合。原生 -webkit-line-clamp 是个“半残废”属性，必须和三个条件共存才能工作：
-
display: -webkit-box（Tailwind 自动注入，但仅当同时用了line-clamp-x类时） -
-webkit-box-orient: vertical（同上，自动加） -
overflow: hidden（必须手动加，Tailwind 不自动补）
漏掉 overflow-hidden 是新手最高频错误。比如写 line-clamp-2 text-sm，看着像样，但没 overflow-hidden 就完全不截断。
另一个易忽略点：父容器高度不能是 min-content 或未设限，否则内部文本不会“溢出”，自然触发不了省略逻辑。
line-clamp 的兼容性与替代方案
line-clamp 是 WebKit 内核专属（Chrome/Safari/Edge 新版），Firefox 从 v128+ 才开始支持（2024 年中以后），旧版 Firefox 完全不认。如果你的用户里还有稳定版 Firefox 用户，得有兜底。
- 服务端渲染或静态站点可预计算字符数 +
text-ellipsis（单行） - 客户端 JS 方案如
clamp()库，但会闪动、影响 SEO - 纯 CSS 替代（如伪元素 + 渐变遮罩）只能模拟视觉效果，无法真正截断文本流
性能上没问题——它是纯 CSS，无 JS 开销。但要注意：如果文本内容频繁变动（比如聊天消息实时更新），重排开销比普通文本略高，因为浏览器要反复测量盒模型。
多行省略时的字体、行高适配问题
line-clamp 截的是“行数”，不是“像素高度”，所以实际显示行数受 font-size、line-height、甚至字体本身的上升/下降高度影响。比如设 line-clamp-2，但 line-height: 3，可能只显示 1 行半就截了，视觉上像少了一行。
- 推荐固定
line-height（如leading-5对应 1.25 倍） - 避免用
line-height: normal或单位less值（如line-height: 1.4），不同字体渲染差异大 - 中文下某些字体（如思源黑体）字身偏高，同样
text-lg leading-6下，可能比系统默认字体少显示 0.2 行
真要像素级控制，就得放弃 line-clamp，改用 JS 测量容器高度再截断——但那就不是“CSS 多行省略”这件事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
