CSS是網(wǎng)頁設(shè)計中不可或缺的一部分，它不僅可以讓網(wǎng)頁更加美觀，還可以提高用戶體驗。其中，收縮框是CSS中比較實用的功能之一，可以實現(xiàn)頁面內(nèi)容的展開和收起。但是，有些時候在展開的同時，我們希望收縮框中能夠顯示一些文字，那該怎么做呢？

<div class="collapse">
<p>這里是需要展開的內(nèi)容</p>
<p>這里也需要展開</p>
</div>
<a href="javascript:void(0);" class="toggle">展開/收起</a>

以上是收縮框的基本結(jié)構(gòu)，其中class="collapse"表示需要收縮的部分，class="toggle"表示展開/收起的按鈕。接下來，我們需要添加一些CSS樣式來實現(xiàn)收縮框中有文字的效果。

.collapse{
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.collapse p{
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
}
.expanded{
height: auto;
}

其中，height屬性和overflow屬性可以控制收縮框的高度和是否顯示內(nèi)容溢出。transition屬性用于實現(xiàn)過渡效果，使得展開和收起的過程更加平滑。p標(biāo)簽可以定義收縮框中文字的樣式，如文字大小、行高和上下邊距。最后，expanded類用于表示展開狀態(tài)的框。

$('.toggle').click(function(){
var collapseHeight = $('.collapse').outerHeight();
$('.collapse').toggleClass('expanded');
if($('.collapse').hasClass('expanded')){
$('.collapse').css('height', collapseHeight + 'px');
}else{
$('.collapse').css('height', 0);
}
});

最后，我們需要使用jQuery來實現(xiàn)收縮框的展開和收起。首先，我們?nèi)〉檬湛s框的高度，然后使用toggleClass()方法來添加或刪除expanded類。接著，如果收縮框被展開，我們將其高度設(shè)置為collapseHeight，并在0.3秒內(nèi)完成transition動畫。如果收縮框被收起，我們將其高度設(shè)置為0，同樣在0.3秒內(nèi)完成transition動畫。

現(xiàn)在我們已經(jīng)成功實現(xiàn)了一個有文字的收縮框，可以根據(jù)自己的需求調(diào)整樣式和文字內(nèi)容，讓網(wǎng)頁更加美觀和易于操作。