在網(wǎng)頁設(shè)計中，經(jīng)常會遇到需要隱藏/展開多余內(nèi)容的需求。這時候，我們可以使用CSS實現(xiàn)多余內(nèi)容折疊的效果。

/* 定義折疊區(qū)域的樣式 */
.fold {
overflow: hidden;
display: -webkit-box; /* 基于WebKit內(nèi)核的瀏覽器 */
-webkit-line-clamp: 3; /* 最多顯示3行文字 */
-webkit-box-orient: vertical;
}
/* 定義展開按鈕的樣式 */
.fold-btn {
cursor: pointer;
}
/* 定義展開狀態(tài)的樣式 */
.unfold {
-webkit-line-clamp: unset; /* 取消文字行數(shù)的限制 */
}

其中，class為fold的元素代表需要折疊的區(qū)域，class為fold-btn的元素代表展開/折疊按鈕。

在實現(xiàn)時，我們首先需要將需要折疊的內(nèi)容包裹在class為fold的元素中。然后，設(shè)置overflow: hidden屬性，這樣可以保證超出范圍的內(nèi)容被隱藏。

接著，使用WebKit內(nèi)核瀏覽器特有的-webkit-line-clamp屬性，可以限制顯示的行數(shù)。以上面代碼為例，最多顯示3行文字。

同時，需要設(shè)置-webkit-box-orient: vertical屬性，保證文字在豎直方向上排列。

最后，需要為展開/折疊按鈕.class為fold-btn的元素添加點擊事件，實現(xiàn)折疊與展開的效果。只需要為元素切換class為unfold即可：

const btn = document.querySelector('.fold-btn');
const foldEl = document.querySelector('.fold');
btn.addEventListener('click', () => {
foldEl.classList.toggle('unfold');
});

現(xiàn)在，我們就可以在網(wǎng)頁中使用上面的代碼，實現(xiàn)多余內(nèi)容折疊的效果啦！