文字比較難解釋，直接看圖應(yīng)該就懂是要做什么了。

成都創(chuàng)新互聯(lián)提供高防主機(jī)、云服務(wù)器、香港服務(wù)器、資陽服務(wù)器托管等

需求

工作中遇到的，需求就是超過四行得有個(gè)展開按鈕，點(diǎn)擊展開顯示所有內(nèi)容，不超過四行的話就不需要這個(gè)按鈕并顯示所有內(nèi)容。

思路首先得判斷文本自否超過四行，因?yàn)檫@些一般都是是前端異步請求然后后端發(fā)送過來，在組長的指導(dǎo)下，使用了 Vue 中的 nextTick 來監(jiān)聽 DOM 中是數(shù)據(jù)變化。接下來主要是 css 上的思路，其實(shí)上圖可以分為兩部分，如下圖，標(biāo)號1的部分展示前面三行，標(biāo)號為2的部分會(huì)根據(jù)1的行數(shù)判斷縮進(jìn)的大小，然后展示第四行。最后通過背景色的控制讓兩者看上去是一段文字。

代碼

核心代碼是中間那部分，其他的不用關(guān)注

演示動(dòng)畫

另一種思路

簡書中i_May的方法，思路有些不同，也可以參考下。

問題工作中該頁面打包到測試環(huán)境在微信中打開后，三個(gè)省略號消失了，問題還在找，找到了會(huì)及時(shí)更新。因?yàn)榉柨赡軙?huì)在行尾出現(xiàn)點(diǎn)顯示問題，暫時(shí)還沒找到解決辦法，但出現(xiàn)概率較小，出現(xiàn)了也不影響。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。