CSS展開收縮全文是一種非常實(shí)用的技巧，可以在較小的空間內(nèi)展示更多的內(nèi)容，讓用戶可以根據(jù)需求選擇查看感興趣的部分。

在HTML結(jié)構(gòu)中，我們需要給需要展開收縮的部分加上一個(gè)特定的類名，例如“text-hidden”，同時(shí)在需要顯示全部?jī)?nèi)容的地方添加一個(gè)按鈕。

<div class="text-hidden">
<p>這是需要展開收縮的文字......</p>
</div>
<button class="read-more">展開全部</button>

接下來(lái)，我們使用CSS中的“:not()”偽類來(lái)創(chuàng)建一個(gè)隱藏所有需要展開的文字的樣式。

.text-hidden:not(:target) {
max-height: 0;
overflow: hidden;
}

上面的代碼將所有沒(méi)有作為目標(biāo)的“.text-hidden”元素的最大高度設(shè)置為0，并將其溢出隱藏。

接下來(lái)，我們需要添加一個(gè)展開所需的樣式，使用戶可以單擊按鈕查看所有內(nèi)容。為此，我們使用“:target”偽類，它可以選擇URL中的特定目標(biāo)元素。這意味著，當(dāng)我們單擊展開按鈕時(shí)，URL中將添加該不可見元素的ID，例如“#text-1”。

.text-hidden:target {
max-height: 300px;
overflow: hidden;
}

上面的代碼將使用最大高度的值，顯示我們想要展開的文本。并且在目標(biāo)元素設(shè)置后，所有需要展開的文本都將顯示出來(lái)。

總的來(lái)說(shuō)，通過(guò)使用“:not()”和“:target”偽類，我們可以創(chuàng)建一個(gè)相對(duì)簡(jiǎn)單但非常實(shí)用的展開收縮全文技巧。