line-clamp只负责截断，不负责渐隐；必须配合::after伪元素做渐变遮罩才能实现“淡出”效果，否则文字为硬裁切、边缘生硬。
多行文字末尾渐隐该用 ::after 还是 line-clamp
直接结论：line-clamp 只负责截断，不负责渐隐；必须配 ::after 伪元素做遮罩才能实现“淡出”效果。只靠 line-clamp + overflow: hidden，文字是硬裁切，边缘生硬，毫无过渡。
常见错误是以为设了 display: -webkit-box 和 -webkit-line-clamp: 2 就完事了——其实这只是第一步。真正让文字“慢慢消失”的，是叠加在末尾的渐变遮罩层。
- 容器必须设
position: relative，否则::after会相对视口定位，一滚动就错位 -
line-height必须为固定值（如1.5），不能用normal或百分比，否则遮罩高度算不准 - 遮罩
height建议设为calc(1.5em + 4px)，比单行高略大，避免露底
::after 渐变方向与遮罩位置怎么配
遮罩方向取决于溢出方向：底部溢出用 to bottom，右侧溢出（如横向标签栏）用 to right。方向写反，遮罩就盖错地方，甚至完全不可见。
以三行文字底部渐隐为例：
立即学习“前端免费学习笔记（深入）”；
.fade-3lines {
position: relative;
line-height: 1.5em;
max-height: 4.5em; /* 1.5 × 3 */
overflow: hidden;
}
.fade-3lines::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.8em; /* 略大于单行高 */
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
pointer-events: none;
}- 若背景不是纯白，把
#fff换成实际背景色，或改用rgba(255,255,255,1)配合透明过渡 -
pointer-events: none必加，否则遮罩会拦截文字选中和复制 - 横向标签栏场景下，
right: 0+width: 30%+to right更合适，避免遮住整个标签
为什么 background-clip: text 在这里不适用
background-clip: text 是用来做“文字内部渐变色”的，不是用来遮罩溢出的。它依赖文字轮廓渲染，而溢出渐隐本质是视觉遮挡，二者解决的问题完全不同。
误用后果明显：
- Firefox 全版本不支持
background-clip: text，直接失效 - iOS Safari 在深色模式下可能意外显示为纯黑或纯白，无法控制遮罩透明度
- 它无法对“被截断的文字边缘”做局部渐变，只能整段文字填色
所以别试图用 color: transparent + background: linear-gradient() 去“渐变掉”最后一行——它做不到。
容易被忽略的交互与兼容性细节
最常漏掉的是 pointer-events: none 和 z-index。遮罩层一旦挡住文字，用户就无法选中、复制、甚至触发 :hover，但很多人调试时只盯着渐变是否生效，忘了检查交互是否还正常。
- 老版 Safari 对
-webkit-line-clamp支持不稳定，建议同时写display: -webkit-box和-webkit-box-orient: vertical - 遮罩层默认
z-index: auto，若父容器有z-index且值较小，遮罩可能被其他元素盖住，显式设z-index: 1更稳妥 - 不要给遮罩层加
transition或动画——它只是静态视觉补丁，动起来反而暴露裁剪边界
真正关键的不是“怎么画出渐变”，而是“怎么让它严丝合缝盖在该盖的位置，又完全不干扰人操作”。这点没调准，效果再炫也没用。
