line-clamp-2 无效的三大原因是：未设 display: -webkit-box、未设 -webkit-box-orient: vertical、未设 max-h- 类；flex/grid 子项必须加 min-w-0 才能触发截断。
line-clamp-2 为什么没效果
不是类名写错了，是三个硬性条件缺一：元素没被设成 display: -webkit-box（父级用了 flex 或 grid 就会覆盖它）、没配 -webkit-box-orient: vertical（手动写了 flex-direction 会冲突）、最关键的是——没设 h- 或 max-h- 类。
它不是“最多两行”，而是“在指定高度内最多显示两行”。容器高度自适应、没约束时，浏览器认为“空间充足”，根本不会触发截断。
- 推荐写法：
class="line-clamp-2 max-h-10"，避免依赖父容器坍塌后的高度 - 若用在
flex子项中，必须加min-w-0，否则默认min-width: auto会阻止收缩，导致行高计算失准 - 别在同一个元素上混用
line-clamp-2和py-3—— 内边距干扰行高测量，第三行可能“漏出来”
Flex/Grid 容器里文本死活不截断
不是 line-clamp-2 失效，是布局逻辑压过了文本逻辑。Flex/Grid 子项默认拒绝压缩，break-words 和 line-clamp 都需要“可压缩空间”才能工作。
-
flex子项必须加min-w-0（或min-w-[0px]），否则无视宽度限制强行撑开 -
grid子项同理，min-w-0是前提，否则浏览器优先分配列宽而非折行 - 如果父容器是
flex-1+overflow-hidden，子项仍需显式加min-w-0，否则 flex 项目不响应溢出裁剪
中英文混排或长单词顶出边界
truncate 和 line-clamp-2 都不管单词内部断字。遇到无空格的中文段落、URL、UUID，整串直接顶出容器边界。
- 优先用
break-words：在自然断点（/、.、-、_后）折行，适合路径、API 地址 - 慎用
break-all：任意字符间切断，可能把JavaScript拆成JavaS-crip-t；中文场景下还可能在汉字中间硬切 - 组合更稳：
line-clamp-2 break-words max-h-10，但注意break-words可能略微增加行高，建议用干净div包文本，内边距由外层控制
想让省略号渐隐而不是硬切
纯 CSS 实现“淡出”效果最稳的方式是 line-clamp 配合 ::after 渐变遮罩，不依赖 JS，兼容性好，也不影响文字选中。
- 父容器必须设
display: -webkit-box、-webkit-line-clamp: 2、-webkit-box-orient: vertical、overflow-hidden和固定line-height -
::after用position: absolute定位在右下角，height建议设为calc(1.5em + 4px)，避免露底 - 渐变方向按溢出位置选：
to bottom（底部渐隐）、to right（右侧渐隐）；颜色用实际背景色，比如白底写rgba(255,255,255,0), #fff 70% - 务必加
pointer-events: none，否则伪元素会拦截鼠标事件
多行截断真正的复杂点不在写几个类，而在于你得同时和布局系统（flex/grid）、文本渲染规则（line-height/breaking）、浏览器私有属性（-webkit-line-clamp）和响应式约束（max-h-/min-w-）打交道。最容易被忽略的，是那个看起来最不起眼的 min-w-0 —— 它不控制外观，却决定整个截断逻辑是否启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
