有些時候產(chǎn)品會有這么個需求，希望給文章或者帖子給一個摘要，最多3行，或者其它行數(shù)，超出3行會補上'...'。當(dāng)然這種很簡單，用css可以搞定。但是遇上要求多點的產(chǎn)品，希望補上的是'...查看全文'，這樣的話就難辦了。

我也在網(wǎng)上查了很多，至少我沒發(fā)現(xiàn)有一個比較好的解決方案，也參考了微博和知乎的信息流，發(fā)現(xiàn)它們可能是根據(jù)文字的個數(shù)來算的，因為并沒有看到有那種 剛好'閱讀全文'這4個字就處于最后一行的末尾。

微博效果：

知乎效果：

因此自己也鼓搗了一番，終于勉強搞出了自己一個還算比較滿意的小庫。 整體的思路還是算每個字的寬度來計算出有多少行。因為web前端還是沒有辦法直接得到文本到底有多少行，所以這個計算還是比較麻煩。用的小技巧就是把每個字都包裹一個行內(nèi)標(biāo)簽，計算這個行內(nèi)標(biāo)簽的寬度。

我自己的項目效果：

項目已經(jīng)放在github上了，npm上也已發(fā)布了，搜 text-overflow 即可

項目地址

demo地址

希望喜歡的同學(xué)，或者用的到的同學(xué)可以用起來，有問題也可以給我提issue，也別忘了給我的項目點star哦， 這樣我會繼續(xù)更新下去的。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。