在進行網頁設計和開發時，我們可能會遇到一個問題，那就是當我們的文本內容超過給定高度時，如何實現展開和收起的效果。CSS提供了解決這個問題的方法，接下來讓我們一起來學習如何實現。

.collapsible {
overflow: hidden; /* 隱藏超過高度的文本 */
height: 100px; /* 設置高度 */
position: relative; /* 定位元素 */
}
.collapsible::after {
content: ''; /* 加入一個偽元素 */
position: absolute; /* 絕對定位偽元素 */
bottom: 0; /* 設置頂部位置 */
width: 100%; /* 設置寬度 */
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 設置漸變背景 */
height: 80px; /* 設置高度 */
}
.collapsible.expanded {
height: auto; /* 自動適應文本高度 */
}
.collapsible.expanded::after {
height: 0; /* 隱藏偽元素 */
display: none; /* 不顯示偽元素 */
}

首先，我們需要將文本內容包括在一個容器中，并使用overflow: hidden;屬性隱藏超過高度的文本，如上面代碼中的.collapsible類。接著，我們添加一個偽元素::after，并將其定位到容器的底部。為了產生漸變效果，在偽元素的背景中使用了線性漸變。

當我們需要展開文本時，將容器的高度設置為自動，即.collapsible.expanded { height: auto; }，此時文本將根據內容高度自動適應。為了隱藏偽元素，我們使用display: none;屬性，同時將其高度設置為0，即.collapsible.expanded::after { height: 0; display: none; }。

最后，我們只需要通過JavaScript來控制容器的CSS類，即可實現展開和收起效果。