在前端開發中，經常會遇到需要展開多行文本的情況。一般來說，多行文本在一些較小的區域中展示出來的時候，只會顯示一部分，需要用戶點擊展開按鈕才能查看完整文本內容。這種效果可以非常方便地通過CSS實現。 通常的做法是使用CSS中的 "overflow" 屬性。這個屬性用于控制當一個元素的內容超出其指定的大小或邊界時該如何處理。默認情況下，CSS中的 "overflow" 屬性設置為 "visible"。這意味著內容會超出其指定的區域，不會被限制或截斷，不會出現滾動條。 為了使多行文本能夠展開，我們可以將 "overflow" 屬性的值設為 "hidden"。這會導致超出元素邊界的內容被隱藏。但是這只是隱藏了文本，還需要添加一個展開按鈕。 我們可以使用CSS中的 ":before" 偽類，創建一個空的元素，并使用CSS中的 "content" 屬性實現一個 "+" 號，用于表示展開按鈕。為了使按鈕永遠都在內容的最后一行，我們需要使用CSS的 "position" 屬性來定位這個按鈕。 同時，我們也需要為展開按鈕添加一個點擊事件，以便按下時可以顯示所有內容。這可以通過Javascript實現。當用戶點擊展開按鈕時，我們可以使用CSS中的 "max-height" 屬性來將內容展開到指定的高度。 下面是一個基本的CSS多行文本展開的代碼模板：

.text-container {
overflow: hidden;
position: relative;
 }
 .text-container:before {
content: "+";
position: absolute;
top: 0;
right: 0;
 }

展開代碼：

.text-container.expanded {
max-height: none;
 }

在以上模板中，我們為 "text-container" 元素設置了 "overflow: hidden"，并使用 ":before" 偽類實現展開按鈕。為了在用戶點擊時將文本展開，我們添加了 "expanded" 類，將 "max-height" 屬性設置為 "none"。 簡而言之，CSS多行文本展開是一個簡單而可行的方案，可以在較小的區域內方便地展示長文本內容。同時，它也為開發者提供了一種優雅的方式來處理較為復雜的UI設計需求。