在網頁開發中，經常會遇到需要顯示大段文本的情況。如果直接將所有內容顯示出來，會占據過多的頁面空間，使用戶體驗不佳。這時候，我們就需要使用“展開收起”的效果來節省頁面空間。

CSS中提供了一種非常簡單的實現方法，只需用到:hover和height屬性。

.text {
height: 50px;
overflow: hidden;
transition: height 0.5s linear;
}
.text:hover {
height: auto;
}

如上所示，首先給需要展示的文本容器設置一個固定的高度，并且將溢出的內容隱藏。然后，在鼠標懸停時，讓容器高度自適應內容高度，實現展開效果。

但是，這種方法有一個缺點，即在鼠標離開后，文本容器會立刻關閉，沒有平滑的效果。為了解決這個問題，可以給容器添加過渡動畫，讓效果更加自然。

.text {
height: 50px;
overflow: hidden;
transition: height 0.5s linear;
}
.text:hover {
height: auto;
transition: height 0.5s linear;
}

如上所示，在:hover偽類中再次添加transition屬性，使文本容器在展開和收起時都能有平滑的過渡效果。

使用展開收起效果能夠更好的優化頁面布局，提升用戶體驗，是非常實用的CSS技巧。