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

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

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

.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屬性可以控制收縮框的高度和是否顯示內容溢出。transition屬性用于實現過渡效果，使得展開和收起的過程更加平滑。p標簽可以定義收縮框中文字的樣式，如文字大小、行高和上下邊距。最后，expanded類用于表示展開狀態的框。

$('.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來實現收縮框的展開和收起。首先，我們取得收縮框的高度，然后使用toggleClass()方法來添加或刪除expanded類。接著，如果收縮框被展開，我們將其高度設置為collapseHeight，并在0.3秒內完成transition動畫。如果收縮框被收起，我們將其高度設置為0，同樣在0.3秒內完成transition動畫。

現在我們已經成功實現了一個有文字的收縮框，可以根據自己的需求調整樣式和文字內容，讓網頁更加美觀和易于操作。