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

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(+) 行，都会发生这种情况。

我创建了一个 JSFiddle:https://jsfiddle.net/nq4ratr7/5/

fiddle-example 的目标是显示最多 3 行的所有标题而没有淡出，并在第 3 行淡出到 4(“4 行...”)的示例。

出于性能原因，不应使用 JS。我很清楚使用 JS 很容易。

Answer 1

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

.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 */
}

<div class="holder">
    <div class="title">
        <h2>1 line of text 1 line of text</h2>
    </div>
    <div class="title">
        <h2>2 lines of text 2 lines of text 2 lines of text 2 lines of text 2 lines of text</h2>
    </div>
    <div class="title">
        <h2>3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text</h2>
    </div>
    <div class="title">
        <h2>4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text</h2>
    </div>
    <div class="title">
        <h2>5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text</h2>
    </div>
    <div class="title">
        <h2>6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text</h2>
    </div>
</div>