HTML 折疊顯隱的效果是在網頁中常見的一種效果。所謂折疊，就是指一段普通的文字內容啟用「展開/折疊」按鈕，點擊之后就能看到該段文字的全部內容，再次點擊就可以恢復成折疊狀態(tài)。在實現這種效果時，我們通常會使用 JavaScript 來編寫功能代碼，但其實也可以使用 CSS 來實現。
CSS 中實現折疊效果需要借助一些比較新的 CSS 屬性，這些屬性分別是 `overflow`、`text-overflow`、`white-space`、`display`，通過合理的運用這些屬性，就可以做出非常漂亮的折疊效果。
以下是一個示例代碼，可以讓你更好地理解 CSS 實現折疊效果的方法：
```htmlCSS文本折疊示例
我是一段很長的文字，我想要在一定長度內折疊，并且顯示“展開/折疊”按鈕。我是一段很長的文字，我想要在一定長度內折疊，并且顯示“展開/折疊”按鈕。我是一段很長的文字，我想要在一定長度內折疊，并且顯示“展開/折疊”按鈕。
展開
``` 上述代碼實現了一種比較簡單的文本折疊的效果，具體實現方式如下： 1. 首先設置 `width` 屬性，制定所需要的長度，超出該長度就會隱藏； 2. 然后設置 `white-space: nowrap` 屬性，讓文字不換行； 3. 再設置 `text-overflow: ellipsis` 屬性，當文字超過長度時，自動在末尾添加省略號； 4. 最后使用 `overflow: hidden` 隱藏超出長度的文字； 5. 點擊“展開/折疊”按鈕時，使用 JavaScript 來動態(tài)修改 CSS 類名，讓文字展開或折疊。 總之，這種方式雖然需要使用 JavaScript 來動態(tài)修改 CSS 類名，但卻可以避免不必要的 JS 代碼，同時，使用 CSS 實現樣式也能讓頁面更具可維護性，建議開發(fā)人員更好地了解這種方式，并適當地在項目中使用。