摘要：有些时候产品会有这么个需求，希望给文章或者帖子给一个摘要，最多行，或者其它行数，超出行会补上。微博效果知乎效果因此自己也鼓捣了一番，终于勉强搞出了自己一个还算比较满意的小库。用的小技巧就是把每个字都包裹一个行内标签，计算这个行内标签的宽度。
有些时候产品会有这么个需求，希望给文章或者帖子给一个摘要，最多3行，或者其它行数，超出3行会补上"..."。当然这种很简单，用css可以搞定。但是遇上要求多点的产品，希望补上的是"...查看全文"，这样的话就难办了。
我也在网上查了很多，至少我没发现有一个比较好的解决方案，也参考了微博和知乎的信息流，发现它们可能是根据文字的个数来算的，因为并没有看到有那种 刚好"阅读全文"这4个字就处于最后一行的末尾。
微博效果：
知乎效果：
因此自己也鼓捣了一番，终于勉强搞出了自己一个还算比较满意的小库。
整体的思路还是算每个字的宽度来计算出有多少行。因为web前端还是没有办法直接得到文本到底有多少行，所以这个计算还是比较麻烦。用的小技巧就是把每个字都包裹一个行内标签，计算这个行内标签的宽度。
我自己的项目效果：
项目已经放在github上了，npm上也已发布了，搜 text-overflow 即可
项目地址
demo地址
希望喜欢的同学，或者用的到的同学可以用起来，有问题也可以给我提issue，也别忘了给我的项目点star哦， 这样我会继续更新下去的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93065.html
摘要：我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端，是一件很难的事吗在今天，我也没有想好一个答案，也不知道怎样给出一个答案。其他不多说了，这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料（不定期更新） - 前端 - 掘金GitHub 上学习前端开发的资料（不定期更新）... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...
摘要：我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端，是一件很难的事吗在今天，我也没有想好一个答案，也不知道怎样给出一个答案。其他不多说了，这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料（不定期更新） - 前端 - 掘金GitHub 上学习前端开发的资料（不定期更新）... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...
摘要：不过建议只用来进行系语言的语义分析，因为有，有类更好的语法高亮，类似的还有，选一个就好了。从目前的使用情况来看，部分实现了，比如自动完成和语法高亮，以及用的检查格式。管理文档的语法高亮。 自从接触到了sublime text，感觉确实是越用越好用，几乎所有和文字编辑有关的都离不开它。这一年多搜集了不少插件，不敢独享，拿出来和大家同乐。我用的是Sublime Text 3, 以下所有的插...
摘要：字符串添加了很多新功能，当然也有很多关于字符串编码的一些学习性东西，在这里咱们就不多做介绍，介绍一下常用的一些方法字符串的遍历接口中字符串扩展了遍历器接口其实看起来和其他的遍历长的挺像的，那我们来看看它是否除了能遍历字符串之外，还能否遍历其 es6字符串添加了很多新功能，当然也有很多关于字符串编码的一些学习性东西，在这里咱们就不多做介绍，介绍一下常用的一些方法 字符串的遍历接口 es6...
摘要：实现这个放在第一个说，因为这个可能是最简单的方法了，代码直接用控制行数，就可以达到目的，当文字超过三行的时候就会截断加上省略号。 前言 单行文字的截断非常简单，但是多行文字的截断可谓是非常头疼，刚学css时候就为了这个写了很多乱七八糟的代码，今天工作又遇到了这个需求...比较巧的是某公众号今天正好也推送了一篇如何设置截断的文章，心血来潮就自己将见到的各种方法总结下，也算加深记忆与理解。...
阅读 1234·2021-11-15 11:38
阅读 3328·2021-11-09 09:47
阅读 1838·2021-09-27 13:36
阅读 2941·2021-09-22 15:17
阅读 2385·2021-09-13 10:27
阅读 2746·2019-08-30 15:44
阅读 1035·2019-08-27 10:53
阅读 2557·2019-08-26 14:00
