CSS Mask 文字渐隐效果演示

单行文本 · 右侧淡出

适合标题、标签、文件名等需要截断的场景

方案一：遮罩只覆盖末尾 35%

这是一段很长的文本内容，当容器宽度不足以显示全部时，末尾会出现柔和的渐变淡出效果，而不像传统的省略号那样突兀地截断。

方案二：遮罩覆盖全部，但前 65% 全黑、后 35% 渐变

这是一段很长的文本内容，当容器宽度不足以显示全部时，末尾会出现柔和的渐变淡出效果，而不像传统的省略号那样突兀地截断。

多行文本 · 底部淡出（配合 line-clamp）

适合文章摘要、评论列表、产品描述等需要折叠多行的场景

方案一：遮罩只覆盖底部 40% 高度

这是一段较长的多行文本内容。CSS mask 是一个非常强大的属性，它可以让你用任何图像或渐变来定义元素的可见区域。结合 -webkit-line-clamp 可以轻松实现多行文字的渐变省略效果，而不需要使用 JavaScript 来计算字符宽度或依赖服务器端截断字符串。这种方法不仅性能更好，而且视觉效果更加自然流畅，给用户一种内容仍在继续的暗示，而不是生硬地被切断。

方案二：遮罩覆盖全部，但前 50% 全黑、后 50% 渐变

核心代码

/* 方案一：遮罩只覆盖末尾区域 */
.fade-type1 {
  overflow: hidden;
  white-space: nowrap;

  mask-size: 35% 100%;           /* 遮罩宽高：只罩住右侧35% */
  mask-repeat: no-repeat;
  mask-position: right center;    /* 遮罩靠右对齐 */
  mask-image: linear-gradient(to left, #000 0%, transparent 100%);
}

/* 方案二：遮罩覆盖全部，渐变在末尾开始 */
.fade-type2 {
  overflow: hidden;
  white-space: nowrap;

  mask-image: linear-gradient(to right, #000 0%, #000 65%, transparent 100%);
}

/* 多行版本（配合 -webkit-line-clamp）*/
.fade-multi {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  /* 方案一：底部局部遮罩 */
  mask-size: 100% 40%;
  mask-position: bottom;
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);

  /* 方案二：整体遮罩 + 底部渐变 */
  /* mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%); */
}