Question

我们需要在最多3行显示产品标题，如果标题突破3行以上，则淡出第3行。

到目前为止，我尝试解决这个问题的方法是使用一个最大高度为3行的包装器，其中的标题和一个覆盖淡出（渐变为淡白色）渐变的伪元素。

.title:after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
  content: '';
  width: 100%;
  height: 1.3rem;
  position: absolute;
  top: 2rem;
  left: 0;
}

问题是，无论是否有第4（+）行，都会发生这种情况。

我创造了一个小提琴：https://jsfiddle.net/nq4ratr7/5/

小提琴示例的目标是在没有淡出的情况下显示最多3行的所有标题，在第3行显示淡入4（“4行......”）的示例的淡出。

哦：出于性能原因，不应该使用JS。我很清楚使用JS很容易; - ）

Answer 1

好的，现在尝试2号我理解你的实际要求。这是一个非常有趣的挑战！

我们现在需要一个溢出的容器。叠加层位于子项内部，其高度来自Tv - 这将产生一个负数（由浏览器变为0），0或超出的高度。然后，我们使用calc(100% - (line-height × 3))的固定高度渐变，并将其向上移动（repeating-linear-gradient）。

＆＃13;

line-height

＆＃13;

.holder {
	width: 275px;
}

.title {
	margin: 30px 0;
	max-height: 75px; /* line-height × 3 */
	overflow: hidden;
}

.title > h2 {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 25px;
	font-size: 18px;
}

.title > h2::after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(100% - 75px); /* 100% - (line-height × 3) */
	transform: translateY(-25px); /* 0 - line-height */
	background: repeating-linear-gradient(rgba(255, 255, 255, 0), #ffffff 25px); /* line-height */
}

＆＃13;

如果超过n行，则淡出最后一行文本

1 个答案: