最稳的多行渐隐方案是line-clamp配合::after伪元素渐变遮罩，核心为容器截断+伪元素覆盖+渐变过渡，需设display:-webkit-box、-webkit-line-clamp、overflow:hidden、固定line-height及absolute定位的pointer-events:none遮罩层。
直接用 line-clamp + ::after 伪元素渐变遮罩，是最稳的多行渐隐方案；useScrollShadow 或 mask-image 适合滚动容器或复杂背景，但不解决纯文本截断场景。
line-clamp 配合 ::after 渐变遮罩（最常用）
这是处理多行文字末尾“淡出”效果的主流做法，核心是容器截断 + 伪元素覆盖 + 渐变过渡。它不依赖 JS，兼容性好，且不影响文字选中和点击。
- 父容器必须设
display: -webkit-box、-webkit-line-clamp: N、-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，否则伪元素会拦截鼠标事件
overflow-hidden 失效时怎么办（常见翻车点）
加了 overflow-hidden 却还溢出，大概率不是类没生效，而是裁剪条件没满足。
- 父容器没设明确宽高约束（如
h-24、max-h-24），只靠flex-1或min-h-full不够 - 子元素用了
position: absolute或transform——脱离文档流后，overflow-hidden对它完全无效 - Flex 容器里，子项默认
min-width: auto，会撑开容器；需额外加min-w-0才能让文本正常收缩 - 混用
overflow-hidden和overflow-x-auto会触发浏览器自动修正，Chrome 可能悄悄把overflow-y改成scroll
滚动容器用 useScrollShadow（Nuxt UI）
如果你要的是“滚动到边缘时出现阴影”，而不是静态文本截断，useScrollShadow 是更语义化的选择。它基于 mask-image 实现，阴影与内容融合，不遮挡交互，也不依赖背景色。
- 只在内容真正溢出时才激活，返回
undefined表示无需样式，无性能浪费 - 支持
orientation: 'vertical'或'horizontal'，自动匹配滚动方向 - 本质是遮罩渐变，不是叠加层，所以不会影响点击、选中、z-index 层级
- 不适用于纯文本截断，仅用于可滚动区域（如
div、section）
mask-image 方案（高级定制，Safari 兼容难）
想自定义遮罩形状或动态控制，mask-image 更灵活，但 Tailwind 默认不支持，且 Safari 限制极多。
-
mask-[url(...)]这种任意值语法在 Tailwind 中不会被编译，必须提前注册进theme.extend.backgroundImage - Safari 要求同时写
mask-image和-webkit-mask-image，且值必须完全一致、必须是 base64 编码 SVG - SVG 必须删掉 XML 声明、换行，所有
fill设为currentColor，图形为纯黑+透明 - 无法用 CSS 变量插值坐标，动态裁剪建议用内联 SVG + CSS 自定义属性驱动
transform
真正容易被忽略的是：渐隐不是视觉特效问题，而是布局控制问题。你得先确认是“文字超出行数”还是“容器内容溢出”，前者用 line-clamp + ::after，后者才考虑 mask-image 或 useScrollShadow。错配方案，调试半天也出不来效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
