在網頁設計中，我們經常會遇到文字內容比較長的情況，如何讓用戶更方便地閱讀，又不至于影響頁面的美觀呢？這時，CSS的一個很好用的功能——點擊展開全文就可以派上用場啦！

.content {
height: 100px;
overflow: hidden;
}
.show-more {
cursor: pointer;
color: blue;
}

首先，我們需要設置一個容器，里面放置著需要展開的內容，我們可以給容器設置一個固定的高度，這里我們設置為100px，再給它添加一個隱藏的溢出屬性，這樣就可以實現長文本的隱藏了。接著，我們在文本下方添加一個按鈕或文字，這里我們用“展開全文”來作為按鈕的文字。

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</div>
<div class="show-more">展開全文</div>

接著，我們需要利用JavaScript來實現點擊展開全文的功能。這里我們使用jQuery庫簡化操作。首先，我們需要聲明一個變量來存儲是否展開文章的狀態。

var show = false;

然后，我們監聽展開全文按鈕的點擊事件，當點擊時，判斷當前文章是否已經展開，如果已經展開，則隱藏文章，同時將按鈕文字改為“展開全文”；如果未展開，則顯示文章，將按鈕文字改為“收起全文”，如下代碼：

$('.show-more').click(function(){
if (!show) {
$('.content').css('height', 'auto');
$('.show-more').text('收起全文');
show = true;
} else {
$('.content').css('height', '100px');
$('.show-more').text('展開全文');
show = false;
}
});

最后，我們就可以看到點擊展開全文按鈕，文章可以被展開或收起了！