Tailwind CSS 3.0+ 默认不包含 line-clamp 是因它依赖非标准的 -webkit-box 布局，需手动安装并启用 @tailwindcss/line-clamp 插件，且必须配合 overflow-hidden 和 max-height 才能生效。
line-clamp在Tailwind中为什么默认不可用
Tailwind CSS 3.0+ 默认不包含 line-clamp 工具类，不是 Bug，而是因为该属性依赖 -webkit-box 布局，属于非标准前缀方案，且与 Flex/Grid 冲突明显。直接写 line-clamp-2 会无效，连编译都不会生成对应 CSS。
必须手动启用插件，且需确认项目已安装并配置 @tailwindcss/line-clamp：
- 运行
npm install -D @tailwindcss/line-clamp - 在
tailwind.config.js的plugins数组中加入require('@tailwindcss/line-clamp') - 确保使用的是 Tailwind v3.0+（v2 不兼容）
line-clamp-2 实际生效的三个必要条件
即使插件已启用，line-clamp-2 仍可能“没反应”——大概率是漏了底层 display 和 overflow 控制。它不是独立样式，而是一组协同规则：
- 元素必须设为
display: -webkit-box（插件自动注入，无需手写） - 必须显式设置
overflow: hidden（否则文字溢出不裁剪） - 必须指定
-webkit-line-clamp: 2（即line-clamp-2的作用目标），且父容器有明确高度或 max-height（否则无截断边界）
典型可用结构：
<div class="line-clamp-2 overflow-hidden max-h-[3em] text-sm"> 这是一段很长的文字，超出两行就会被省略号截断。 </div>
line-clamp 与 height / max-height 的关系很关键
line-clamp 本身不控制容器高度，它只告诉 WebKit “最多显示几行”，真正决定是否触发截断的是容器的 height 或 max-height 是否不足以容纳更多行。
- 用
h-10可能失效：固定像素高度受 font-size、line-height 影响大，易错位 - 推荐用
max-h-[Xem]（如max-h-[3.6em]），按行高倍数预留空间，更稳定 - 若父容器
display: flex，子元素需加align-self: flex-start或设min-height: 0，否则 flex item 可能忽略max-height
line-clamp 在 Safari 和 Chrome 行为一致，但不支持 Firefox
Firefox 完全不支持 -webkit-line-clamp，所有 line-clamp-* 类在 Firefox 中静默失效，文字照常换行。这不是 Tailwind 的问题，而是浏览器能力缺失。
如果需要跨浏览器多行截断，没有纯 CSS 方案。可选路径包括：
- 服务端预截断（适合静态内容）
- 用 JavaScript 库如
react-lines-ellipsis（React 场景） - 接受 Firefox 下不截断，加注释说明设计预期
别试图用 text-overflow: ellipsis 配合 white-space: nowrap 强行模拟——那只能单行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
