最稳妥的多行溢出渐隐方案是用::after伪元素配合linear-gradient，需设position:relative、固定line-height及精确max-height计算，否则遮罩错位或露底。
直接用 ::after 伪元素加 linear-gradient 是目前最稳妥的多行溢出渐隐方案，但必须配合 position: relative、固定 line-height 和精确的 max-height 计算，否则遮罩会错位或露底。
为什么 text-overflow: ellipsis 对多行无效
text-overflow: ellipsis 只在单行生效，因为它依赖 white-space: nowrap —— 这个声明会强制禁用换行，和多行逻辑天然冲突。即使你设了 height 和 overflow: hidden，浏览器也只做硬裁剪，不会判断“该在哪断、该加几个点”，末尾常切在字中间甚至半个字母上。
常见错误现象：
- 容器设了
height: 48px+line-height: 24px+overflow: hidden，但没省略号，只剩半截“…文” - 用了
-webkit-line-clamp，但在 Firefox 或旧版 Edge 里整段文字撑开容器 - 强行给
::after设content: "..."却没加position: absolute，省略号飘在左上角或被裁掉
::after 渐隐遮罩的关键定位与渐变写法
这不是“真截断”，而是用视觉遮盖模拟渐隐效果。核心是让遮罩层精准贴合文字末尾区域，并用透明过渡掩盖突兀裁边。
实操要点：
- 父容器必须设
position: relative，为伪元素提供定位上下文 -
line-height必须固定（如1.5），不能用normal或百分比值，否则max-height和遮罩高度无法对齐 -
max-height推荐用em单位计算：比如显示 2 行，就写max-height: 3em（2 × 1.5 = 3，再留点余量） -
::after定位推荐：position: absolute; bottom: 0; right: 0; width: 100%; height: calc(1.5em + 4px)—— 高度略大于单行高，避免露底 - 渐变方向按溢出位置调整：底部溢出用
to bottom，右侧溢出用to right；背景色要匹配实际背景，例如白底写background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%) - 必须加
pointer-events: none，否则遮罩层会拦截文字选中和点击
兼容性与容易翻车的细节
这个方案轻量、无 JS，但落地时有三个硬限制，稍不注意就失效：
- 行高动态变化时会错位：如果字体大小或
line-height被媒体查询或用户缩放改变，max-height和::after的bottom值就不再对齐，“…”可能盖住倒数第二个字，或完全悬空 - 中英文混排末尾宽度不一：“…”常和最后一个字粘连，需手动调
padding-right或::after的width - 不响应系统大字体模式：用户把字号调到 150%，
2em就失效了，省略号偏移或消失；若项目需支持可访问性缩放，得用 JS 动态重算高度 -
display: table-cell容器内伪元素无法精确定位，必须先加display: inline-block才能生效
最常被忽略的是 pointer-events: none 和 position: relative 的组合 —— 少一个，文字就点不了、选不中，但控制台不会报错，问题很难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
