CSS3 收起文字是一個常用而又實用的功能，可以利用它顯示大量的內容卻又不顯得太擁擠。下面我們一起來看看如何通過 CSS3 實現收起文字。

首先，我們需要定義兩個 class 名稱： collapse-btn 和 collapse-content。collapse-btn 用來定義收起按鈕的樣式，collapse-content 用來定義需要收起的內容的樣式。

.collapse-btn {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
}
.collapse-content {
display: none;
}

接下來，我們需要利用 JavaScript 來實現點擊按鈕顯示或者隱藏內容的功能。

const collapseBtn = document.querySelector('.collapse-btn');
const collapseContent = document.querySelector('.collapse-content');
collapseBtn.addEventListener('click', () =>{
if (collapseContent.style.display === 'none') {
collapseContent.style.display = 'block';
collapseBtn.innerText = '收起';
} else {
collapseContent.style.display = 'none';
collapseBtn.innerText = '展開';
}
});

以上就是實現 CSS3 收起文字的代碼，通過這個功能可以方便地展示大量的內容，卻又不會讓頁面顯得過于擁擠。