在網(wǎng)頁設(shè)計中，CSS是一項非常重要的技術(shù)。當(dāng)我們在網(wǎng)頁中使用較長的文字內(nèi)容時，可能需要將其折疊起來，并加上展開全文的功能。那么，如何使用CSS來實現(xiàn)呢？
首先，我們可以使用p標(biāo)簽來對文字進行分段，使其更加清晰易讀。如下所示：

<p>這是一段很長的文字內(nèi)容...</p>
<p>又可以繼續(xù)寫下一段文字內(nèi)容...</p>
<p>總之就是很長很長的文字內(nèi)容啦！</p>

接著，我們可以使用CSS的max-height屬性來設(shè)置元素的最大高度。這里我們將其設(shè)置為一個較小的值，以便在初次加載頁面時只顯示部分內(nèi)容，其余部分被隱藏起來。代碼如下：

<style>
.text {
overflow: hidden;
max-height: 100px;
}
</style>
<div class="text">
<p>這是一段很長的文字內(nèi)容...</p>
<p>又可以繼續(xù)寫下一段文字內(nèi)容...</p>
<p>總之就是很長很長的文字內(nèi)容啦！</p>
</div>

此時，頁面上只會顯示部分內(nèi)容，并在元素的底部添加了省略號。
最后，我們需要添加一個展開全文的按鈕，以便當(dāng)用戶點擊時能夠顯示被隱藏的內(nèi)容。我們可以使用CSS的:hover偽類來實現(xiàn)按鈕的樣式變化，效果類似于以下代碼：

<style>
.text {
position: relative;
overflow: hidden;
max-height: 100px;
}
.text:hover {
max-height: 1000px;  /* 顯示全部內(nèi)容 */
}
.text:hover .button {
display: none;  /* 點擊按鈕后隱藏 */
}
.text:hover .expanded {
display: inline-block; /* 顯示全文按鈕 */
}
.button {
position: absolute;
bottom: 0;
right: 0;
margin: 0 10px 10px 0;
background-color: #ccc;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #999;
color: #fff;
}
.expanded {
display: none;
}
</style>
<div class="text">
<p>這是一段很長的文字內(nèi)容...</p>
<p>又可以繼續(xù)寫下一段文字內(nèi)容...</p>
<p>總之就是很長很長的文字內(nèi)容啦！</p>
<div class="button">展開全文</div>
<div class="expanded">>這是完整的文字內(nèi)容...</div>
</div>

在以上代碼中，我們添加了一個class為.button的元素，以及一個class為.expanded的元素。當(dāng)用戶懸停在.text元素上時，之前被隱藏的部分將被顯示，同時按鈕也會隨之消失，并被替換為完整的文字內(nèi)容。
通過使用CSS的max-height屬性，搭配按鈕的功能實現(xiàn)，我們可以輕松地在網(wǎng)頁中實現(xiàn)折疊展開全文的效果，讓用戶可以更加方便地閱讀長篇文章。