移动端文本渐变淡出需用::after伪元素叠加linear-gradient遮罩实现，而非text-overflow；要求容器块级、宽度受限、white-space: nowrap；多行需结合-webkit-line-clamp与精确max-height；mask-image因兼容性差不推荐用于生产环境。
移动端文本渐变淡出比省略号更难实现，因为 CSS 没有原生支持
纯 CSS 实现“渐变淡出”效果（即文本末尾平滑过渡到透明）不是靠 text-overflow，而是用 ::after 伪元素叠加线性渐变遮罩。它不替换文本，也不截断 DOM，只是视觉上“藏掉”末尾部分——这点和 text-overflow: ellipsis 的语义与行为完全不同。
关键前提是：容器必须是块级、有固定或受限宽度（max-width），且文本不能换行（white-space: nowrap 或多行需额外控制高度）。否则渐变区域无法对齐文本末端。
用 ::after + linear-gradient 实现单行渐变淡出
这是目前最稳定、兼容性最好的方案，适用于 iOS Safari 和 Android Chrome（≥ 50）。
-
position: relative在父容器上启用定位上下文 -
::after设为absolute，覆盖在文本右上角，宽度约40px，高度拉满 - 背景用
linear-gradient(to right, transparent, #fff)（注意：颜色必须和容器背景一致，否则边缘会露白边） - 必须设置
pointer-events: none，避免遮挡文本交互
示例代码：
立即学习“前端免费学习笔记（深入）”；
.fade-out {
position: relative;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.fade-out::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right, transparent, #fff);
pointer-events: none;
}
⚠️ 容易踩的坑：background 颜色写死成 #fff 但容器背景是灰色或图片时，会穿帮；应优先用 rgba(255,255,255,0.8) 叠加或 JS 动态读取背景色。
多行文本做渐变淡出，-webkit-line-clamp 不够用
-webkit-line-clamp 只能截断并留白，没法渐变。真要多行淡出，得组合三要素：
- 用
display: -webkit-box+-webkit-line-clamp控制最大行数（比如 2 行） - 给容器设
line-height和精确max-height（如2em × 2 = 4em） -
::after放在底部，bottom: 0，height: 1.5em，渐变方向改为to bottom
但要注意：如果最后一行实际没填满，渐变区域会盖住空白，显得突兀。这时候不如放弃渐变，老实用 text-overflow: ellipsis ——不是所有场景都适合强上视觉效果。
为什么不用 mask-image？它现在还太脆
理论上 mask-image: linear-gradient(...) 更干净，但它在 iOS Safari 上长期存在渲染闪烁、首次加载不生效、或和 transform 冲突的问题。Android Chrome 虽支持，但遇到 will-change 或滚动优化时容易失效。
更现实的限制是：它不支持 fallback，一旦不支持就整段文字全透明，而 ::after 方案至少能降级为正常显示。
所以除非你明确只跑在最新 Chrome/Firefox Desktop，否则别在移动端生产环境用 mask-image 做文本淡出。
