line-clamp-3 在 tailwind 中生效需三要素齐备：启用 @tailwindcss/line-clamp 插件、同时使用 line-clamp-3 + overflow-hidden + 块级显示、避免 display 冲突并酌情添加 break-words。
要让 line-clamp-3 在 HTML + Tailwind CSS 中真正生效，不是加个类名就完事——它依赖一组协同样式，缺一不可。核心在于：插件启用、必要类组合、元素显示模式匹配。
必须先启用 line-clamp 插件
Tailwind v3.3+ 默认不包含 line-clamp 工具类。需手动安装并注册插件：
- 运行
npm install -D @tailwindcss/line-clamp - 在
tailwind.config.js的plugins数组中加入：require('@tailwindcss/line-clamp') - 重启开发服务器（热更新通常不触发新插件的 CSS 编译）
使用时必须同时写齐三个关键类
line-clamp-3 单独存在是无效的。它只负责设置 -webkit-line-clamp: 3，其余支撑样式需显式添加：
-
line-clamp-3：声明最多显示 3 行 -
overflow-hidden：裁剪溢出内容（最常被漏掉！） -
块级显示上下文：如
block、flex-col或默认块容器；不能是inline或未约束宽度的 flex 子项
示例正确写法：<div class="line-clamp-3 overflow-hidden text-sm">这里是三行以上的内容…</div>
注意 display 冲突与容器高度限制
line-clamp 底层依赖 display: -webkit-box，因此会自动覆盖元素的 display 值。这意味着：
- 不能和
flex、grid、inline-flex等 display 类共存（会被插件注入的-webkit-box覆盖） - 若父容器是 flex，子元素建议加
min-w-0防止撑开，再配合overflow-hidden - 容器最好有明确的高度约束，例如
max-h-[5.4em]（按text-sm+leading-relaxed推算约 1.8em × 3 行），否则可能因高度富余而不触发截断
中文与混排场景的额外处理
中英文混排时，浏览器可能因无空格不换行，导致 line-clamp-3 实际只显示 1 行就“满”了。建议补充：
-
break-words：比break-all更友好，优先按字或词边界折行 - 避免
white-space: nowrap（它会彻底禁用换行） - 如遇标点被孤悬末尾，可尝试加
overflow-wrap: break-word（Tailwind 中为overflow-wrap-break-word）
完整推荐组合：class="line-clamp-3 overflow-hidden break-words text-sm"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
