在網頁開發中，經常需要使用 CSS 來隱藏一些內容，以達到特定的設計要求。其中一個常見的需求是將較長的內容截斷并以省略號表示。這樣的效果可以通過 CSS 屬性 text-overflow 來實現。

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

使用上述代碼即可實現將單行文本超出一定長度后以省略號顯示。但是，如果我們需要隱藏的文本內容跨越多行，該怎么做呢？上述代碼只適用于單行文本。

針對多行文本的需求，我們可以使用一種比較 trick 的方法來實現。首先，我們將文本容器的高度限制在一定范圍，比如兩行的高度。然后，我們將文本容器的 overflow 屬性設為 hidden，即隱藏內容超出容器范圍的部分。接著，我們使用 ::before 偽類，在文本容器底部添加一個半透明的漸變遮罩，實現過渡效果。

.ellipsis-two-lines {
display: block;
width: 100%;
height: 2.2em;
line-height: 1.1em;
font-size: 16px;
overflow: hidden;
position: relative;
}
.ellipsis-two-lines::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.1em;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

以上代碼中，我們指定了容器的高度為 2.2em，即兩行文字的高度。由于每行文字的行高為 1.1em（即容器高度除以行數），我們通過 line-height 屬性來指定每行的行高為 1.1em。同時，我們還通過 ::before 偽類添加了一個漸變遮罩，遮擋了隱藏內容的底部，實現了更好的過度效果。

使用上述代碼，我們就可以輕松將跨越兩行的內容隱藏，并以省略號顯示了。