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

Question

我们最多需要显示 3 行的产品标题，如果标题超过 3 行，则仅淡出第 3 行。

到目前为止，我尝试解决这个问题的方法是使用一个包含 3 行 max-height 的包装器，其中包含标题和一个覆盖 fade-out 的 pseudo-element（resp。 fade-to-white) 渐变.

.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 行...”）。

对于performance-reasons，不应使用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>

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

Fadeout last line of text if more than n lines

css

clamp