最常用且稳妥的多行文字溢出渐隐方案是用::after伪元素配合渐变背景，关键在于遮罩层精准覆盖文字末尾且不干扰点击与选中；需设置容器行数限制、隐藏溢出，并用绝对定位伪元素加线性渐变实现透明过渡，同时设pointer-events:none确保交互正常。
用 ::after 伪元素配合渐变背景，是最常用也最稳妥的多行文字溢出渐隐方案。关键在于遮罩层要精准覆盖在文字末尾，且不影响点击和选中行为。
基础结构：容器需设行数限制与隐藏溢出
先确保父容器能控制显示行数，并裁剪多余内容：
- 设置
display: -webkit-box或使用line-clamp（现代浏览器） - 必须指定固定行高（如
line-height: 1.5）和最大高度（如max-height: 3em） - 加上
overflow: hidden和position: relative（为伪元素定位准备）
::after 遮罩层：用线性渐变实现透明过渡
伪元素盖在文字右下角，用从不透明到透明的渐变模拟“渐隐”效果：
- 定位方式推荐
position: absolute; bottom: 0; right: 0; width: 100%; height: 2em; - 背景用
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);（白色底时） - 若背景非纯白，把
#fff换成实际背景色，或改用rgba(255,255,255,1)+ 透明过渡 - 加
pointer-events: none;确保不拦截文字交互
兼容性与细节优化
部分老浏览器（如旧版 Safari）对 -webkit-line-clamp 支持不稳定，建议：
立即学习“前端免费学习笔记（深入）”；
- 用
-webkit-box-orient: vertical+-webkit-line-clamp组合，同时保留display: -webkit-box - 渐变方向按溢出位置调整：右侧溢出用
to right，底部用to bottom - 遮罩高度建议略大于单行高（如
height: calc(1.5em + 4px)），避免露底 - 可加
z-index: 1防止被其他元素遮挡
基本上就这些。核心就是“容器截断 + 伪元素遮罩 + 渐变过渡”，不复杂但容易忽略定位和 pointer-events。
