CSS是一種強(qiáng)大的樣式語(yǔ)言，可以控制網(wǎng)頁(yè)的外觀和布局。在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要隱藏多余的文字，以便更好地呈現(xiàn)信息。CSS提供了多種方法來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)，其中包括多行隱藏多余文字。

/* 隱藏多余文字 */
.overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 兼容性處理 */
.overflow-ellipsis::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 20px 1px 45px;
background: -webkit-gradient(linear, right top, left top, from(transparent), to(white));
background: linear-gradient(to left, transparent, white);
}

這段代碼定義了一個(gè)樣式類`.overflow-ellipsis`，它可以隱藏多余的文字并在末尾添加省略號(hào)。它使用了一些CSS屬性：

• `overflow: hidden`：將多余的內(nèi)容隱藏。
• `text-overflow: ellipsis`：在文本末尾添加省略號(hào)。
• `display: -webkit-box`：將元素轉(zhuǎn)換為彈性容器。
• `-webkit-line-clamp: 3`：限制容器內(nèi)文本的行數(shù)為3。
• `-webkit-box-orient: vertical`：使文本垂直排列。

但是，這個(gè)方法只在Chrome和Safari瀏覽器上生效。為了使其兼容其他瀏覽器，我們需要添加一個(gè)偽元素來(lái)模擬省略號(hào)的效果。

在這個(gè)例子中，我們使用了`::after`偽元素來(lái)添加省略號(hào)。它的位置是絕對(duì)定位，位于容器的右下角。它的背景采用了漸變效果，以使其看起來(lái)更自然。

可以通過(guò)給HTML元素加上這個(gè)樣式類來(lái)實(shí)現(xiàn)多行隱藏多余文字的效果：

<div class="overflow-ellipsis">
<p>這里是一些很長(zhǎng)很長(zhǎng)的文字，我們只想顯示它的前三行。</p>
</div>

總的來(lái)說(shuō)，CSS的多行隱藏多余文字方法非常有用，并且可以輕松實(shí)現(xiàn)。只需要加上一些簡(jiǎn)單的CSS屬性，就可以讓網(wǎng)頁(yè)更加美觀和易讀。