单行截断用truncate需block+width+whitespace-nowrap+overflow-hidden；多行用line-clamp-n需启用插件、手动加overflow-hidden、设max-h-高度、flex/grid中子项加min-w-0，缺一即静默失效。
单行截断用 truncate，但必须配合块级显示、宽度约束和 overflow-hidden；多行截断用 line-clamp-N，但插件要装、overflow-hidden 要手加、max-h- 高度必须设——缺一不可，否则静默失效。
为什么 truncate 加了没反应？
它只打包三条声明：overflow: hidden、text-overflow: ellipsis、white-space: nowrap，不改元素显示模式也不设宽。常见失效点：
- 元素是
span或其他 inline 元素 → 必须加block或inline-block - 父容器没设
max-w-，或自身没写w-64类 → 浏览器不知道“溢出”从哪开始 - 在 flex 容器里用了
flex-1 truncate，但子项没加min-w-0→ flex 项目默认min-width: auto，拒绝收缩，宽度撑满，截断跳过 - 漏掉
overflow-hidden→truncate不含它，但省略号必须靠隐藏溢出内容才能显示
为什么 line-clamp-2 显示三行？
它不是“最多两行”，而是“在指定高度内最多显示两行”。没有高度边界，浏览器就认为空间充足，根本不会触发截断。必须同时满足：
- 已启用
@tailwindcss/line-clamp插件（tailwind.config.js中plugins: [require('@tailwindcss/line-clamp')]） - 元素显式带
overflow-hidden（插件不自动加） - 设了
max-h-[3.6em]或h-10等高度限制（推荐用em单位，避免受font-size和line-height影响错位） - 若在 flex/grid 容器中，子元素必须加
min-w-0，否则默认min-width: auto会干扰高度计算
带 padding 的元素上 line-clamp 异常怎么办？
内边距会干扰 -webkit-box 对内容区域的计算，导致省略号出现但第三行文字“漏”出来。这不是 Tailwind 的 bug，是 WebKit 截断机制与 padding 的固有冲突。解决方法：
- 不要把
line-clamp-2和py-2写在同一元素上 - 加一层内部包裹：
<div class="py-2"><p class="line-clamp-2 overflow-hidden max-h-[3.6em]">文本</p></div> - 如果子项本身是 flex 容器，再补
align-self: flex-start或min-h-0，防止它忽略max-h-
Firefox 下 line-clamp 完全不生效？
因为 -webkit-line-clamp 是 WebKit 私有属性，Firefox 原生不支持，所有 line-clamp- 类在 Firefox 中静默失效。这不是配置问题，是浏览器能力缺失。可选路径：
- 接受 Firefox 下不截断，加设计注释说明预期行为
- 服务端预截断（适合静态内容）
- 前端用 JS 库如
react-lines-ellipsis（仅限 React 场景） - 别试图用
text-overflow: ellipsis+ 多行布局硬凑，CSS 没有跨浏览器纯方案
最易被忽略的是：所有截断效果都依赖明确的高度或宽度边界，truncate 和 line-clamp-N 只是“开关”，不是“尺寸定义者”。它们不会帮你把一个无约束的 div 压成固定宽高——那得你来定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
