产品标题3行截断：超行时仅淡出第3行的实现方案问询

你的思路完全没问题——用容器限制高度+伪元素渐变遮罩是实现这个需求的经典方法，我来帮你完善细节，确保效果稳定：

完整实现代码 #

HTML结构 #

<div class="product-title">
  这是一个超长的产品测试标题，用来验证超过3行时的淡出效果，这是一个超长的产品测试标题，用来验证超过3行时的淡出效果，这是一个超长的产品测试标题，用来验证超过3行时的淡出效果
</div>

CSS样式 #

.product-title {
  line-height: 1.3rem; /* 统一行高，和伪元素高度对应 */
  max-height: calc(1.3rem * 3); /* 限制最多显示3行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  position: relative; /* 让伪元素相对于标题容器定位 */
  padding-bottom: 0.1rem; /* 可选：避免渐变完全盖住最后一行的底部文字 */
}

.product-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.3rem; /* 高度等于行高，刚好覆盖最后一行 */
  /* 渐变从透明过渡到背景色，这里假设背景是白色 */
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.7) 50%, 
    rgba(255, 255, 255, 1) 100%);
}

关键细节说明 #

• 容器定位必须设置：一定要给标题容器加position: relative，否则伪元素会相对于整个页面定位，遮罩效果完全失效
• 行高与伪元素高度匹配：伪元素的高度要和标题的line-height保持一致，这样遮罩刚好覆盖最后一行的区域，不会多遮或少遮
• 适配非白色背景：如果你的页面背景不是白色，把渐变中的rgba(255,255,255,1)换成容器的实际背景色，比如灰色背景就用rgba(245,245,245,1)
• 调整淡出效果：可以修改渐变的百分比参数，比如把0%的透明区域延长到60%，让淡出更自然：rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%

效果说明 #

• 当标题内容≤3行时，容器高度刚好适配，伪元素的渐变遮罩会被容器的overflow: hidden隐藏，不会显示出来
• 当标题内容>3行时，超出的内容被容器隐藏，同时伪元素的渐变会覆盖在最后一行文字上，实现自然的淡出效果

内容的提问来源于stack exchange，提问作者Raphael Jeger