使用css實現文本可以部分顯示和全部顯示效果

標籤：http   技術分享   大神   寬高   方法   png   網頁   flow   內容   

我們經常會看到一些網頁有如下效果：

點擊文本的小箭頭後：

想要達到如下的效果，其實並不難，我的思路是，先使用一個div（先設定一個小於p高度的值，並使用overflow:hidden;,使p顯示只有div設定高度以內的內容，當點擊div時，變為和p一樣的高度），在裡面用一個p標記存放所有的常值內容，用一個i標記（1小箭頭）用於第一次點擊顯示全部文本（使用hover，設定點擊後，i標記的高度為0，就可以達到點擊後影藏1小箭頭的效果），於此同時，再在p標記中加一個i標記（2小箭頭）用於第二次點擊切換為顯示部分文本，當你第二次點擊時其實並不能切換到顯示部分文本的效果，因為p標記中的i標記始終是屬於div中的，因此，我們可以在div外再使用一個span標籤（設定成和2小箭頭一樣的寬高），將其固定定位到2小箭頭正上方，然後背景顏色設為透明（反正我是設了的，以免被相同的span標籤影響），這樣看起來就像是點擊了小箭頭後就可以切換兩種狀態一樣。

 

（如果有大神有改良的方法請在評論區解答，謝謝！）

使用css實現文本可以部分顯示和全部顯示效果