自己寫了一個多行文本溢出文字補(bǔ)全的小庫, 說不定你會用得到的

Eminjannn 發(fā)布于2019-08-22 14:59 / 2170人閱讀

摘要：有些時候產(chǎn)品會有這么個需求，希望給文章或者帖子給一個摘要，最多行，或者其它行數(shù)，超出行會補(bǔ)上。微博效果知乎效果因此自己也鼓搗了一番，終于勉強(qiáng)搞出了自己一個還算比較滿意的小庫。用的小技巧就是把每個字都包裹一個行內(nèi)標(biāo)簽，計算這個行內(nèi)標(biāo)簽的寬度。

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

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

微博效果：

知乎效果：

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

我自己的項(xiàng)目效果：

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

項(xiàng)目地址

demo地址

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

GPU云服務(wù)器云服務(wù)器 html里的多行文本自己的小程序開發(fā)自己的小程序創(chuàng)建自己的小程序

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93065.html

相關(guān)文章

前端文章- 收藏集 - 掘金

摘要：我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新） - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新）... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...

sugarmo 2019-08-20 18:27 評論0 收藏0
前端文章- 收藏集 - 掘金

摘要：我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新） - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新）... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...

Pocher 2019-08-29 13:05 評論0 收藏0
Sublime Text 特色插件推薦，持續(xù)更新！

摘要：不過建議只用來進(jìn)行系語言的語義分析，因?yàn)橛?，有類更好的語法高亮，類似的還有，選一個就好了。從目前的使用情況來看，部分實(shí)現(xiàn)了，比如自動完成和語法高亮，以及用的檢查格式。管理文檔的語法高亮。自從接觸到了sublime text，感覺確實(shí)是越用越好用，幾乎所有和文字編輯有關(guān)的都離不開它。這一年多搜集了不少插件，不敢獨(dú)享，拿出來和大家同樂。我用的是Sublime Text 3, 以下所有的插...

Jensen 2019-07-31 11:43 評論0 收藏0
es6 字符串的擴(kuò)展

摘要：字符串添加了很多新功能，當(dāng)然也有很多關(guān)于字符串編碼的一些學(xué)習(xí)性東西，在這里咱們就不多做介紹，介紹一下常用的一些方法字符串的遍歷接口中字符串?dāng)U展了遍歷器接口其實(shí)看起來和其他的遍歷長的挺像的，那我們來看看它是否除了能遍歷字符串之外，還能否遍歷其 es6字符串添加了很多新功能，當(dāng)然也有很多關(guān)于字符串編碼的一些學(xué)習(xí)性東西，在這里咱們就不多做介紹，介紹一下常用的一些方法字符串的遍歷接口 es6...

Euphoria 2019-08-23 14:40 評論0 收藏0
如何對多行文本進(jìn)行截斷？

摘要：實(shí)現(xiàn)這個放在第一個說，因?yàn)檫@個可能是最簡單的方法了，代碼直接用控制行數(shù)，就可以達(dá)到目的，當(dāng)文字超過三行的時候就會截斷加上省略號。前言單行文字的截斷非常簡單，但是多行文字的截斷可謂是非常頭疼，剛學(xué)css時候就為了這個寫了很多亂七八糟的代碼，今天工作又遇到了這個需求...比較巧的是某公眾號今天正好也推送了一篇如何設(shè)置截斷的文章，心血來潮就自己將見到的各種方法總結(jié)下，也算加深記憶與理解。...

vspiders 2019-08-29 17:12 評論0 收藏0