使用 ::after 伪元素实现多行省略展开渐变效果，核心在于将容器设为相对定位，并在末尾叠加一个绝对定位的渐变遮罩层。通过设置 line-clamp 或固定高度限制文本行数，配合 background-clip: text 和透明背景，即可在视觉上实现平滑过渡。
如何控制省略出现的行数与位置？
要精确控制省略号出现的位置，需结合 -webkit-line-clamp 属性与 display: -webkit-box。该属性允许你指定最多显示的行数，超出部分将被截断并显示省略号。同时，必须确保父容器具有明确的宽度或最大宽度，否则换行行为不可预测。此外，渐变遮罩层的起始位置应与文本最后一行的底部对齐，以保证视觉连贯性。
.text-container {
position: relative;
width: 300px;
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-container::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 1.5em; /* 与行高一致 */
background: linear-gradient(to right, transparent, white);
pointer-events: none;
}上述代码中，.text-container 设置了最大三行显示，超出部分自动隐藏并添加省略号。::after 伪元素作为遮罩层，从右向左渐变透明至白色，模拟“展开”视觉效果。注意：height 必须等于 line-height，否则遮罩无法完全覆盖最后一行。
立即学习“前端免费学习笔记（深入）”；
如何实现从左到右的渐变展开方向？
若希望渐变方向为从左到右（即左侧先展开），只需修改 linear-gradient 的方向参数。默认情况下，to right 表示从右向左透明，而 to left 则相反。同时，调整 background-position 可进一步优化对齐精度。此方法适用于需要强调右侧内容被遮挡的场景，如卡片式布局中的摘要展示。
.text-container-left-to-right::after {
background: linear-gradient(to left, transparent, white);
background-position: right center;
}该变体将渐变方向反转，使左侧区域逐渐显现，右侧保持模糊。配合 background-position: right center，可确保渐变中心与文本右边缘对齐。实际应用中，可根据设计需求微调透明度阈值和颜色值，例如使用半透明灰色替代纯白，以增强层次感。
当文本不足三行时，渐变遮罩是否仍会显示？
是的，即使文本未达三行，::after 遮罩层依然会渲染，但其可见性取决于背景色与页面背景的对比度。若页面背景为白色，且遮罩末端也为白色，则几乎不可见；若背景为深色，则可能呈现轻微灰边。为避免这种情况，可通过 JavaScript 动态检测文本高度，或在 CSS 中使用 @media 查询根据内容长度切换样式。另一种方案是移除 ::after 的 content 属性，使其不生成框，从而彻底隐藏遮罩。
