今天我們來學習一種在網頁設計中非常常用的技巧，就是使用 CSS 觸發顯示全部的文章。在有些情況下，我們的文字內容非常長，在網頁上直接展示會造成不美觀，那么我們可以使用 CSS 來實現用戶點擊觸發展開全部內容的效果。 首先，我們需要使用 HTML 和 CSS 配合來實現這個效果。一般情況下，我們會在 HTML 中使用 p 標簽來插入文章段落，并在 CSS 中使用 pre 標簽來包裹需要點擊展開的長段落。 HTML 代碼示例：

這是一個段落。

這個段落非常長，需要點擊展開顯示全部內容。

這是另外一個段落。

CSS 代碼示例： pre { white-space: pre-wrap; /* 對文本中的空格、換行符等進行處理 */ max-height: 100px; /* 限制顯示的高度，內容超出的部分將被隱藏 */ overflow: hidden; /* 隱藏超出部分的內容 */ cursor: pointer; /* 鼠標懸停時顯示手型光標 */ } pre.clicked { max-height: none; /* 展開全部內容 */ } 以上代碼中，我們使用 white-space 屬性來對文本中的空格、換行符等進行處理。然后，我們使用 max-height 屬性來限制段落顯示的高度，overflow 屬性用于隱藏超出部分的內容。最后，我們使用 cursor 屬性來控制鼠標懸停時的光標效果。 當用戶點擊長段落時，我們需要使用 JavaScript 來添加一個類名來觸發展開全部內容的效果。 JavaScript 代碼示例： const pre = document.querySelector("pre"); pre.addEventListener("click", function() { pre.classList.toggle("clicked"); }); 通過上述代碼，我們就可以使用 HTML、CSS 和 JavaScript 來實現觸發顯示全部的文章效果了。那么在實際項目中，我們可以適當調整樣式，以求達到更加美觀、實用的效果。