自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的

有些时候产品会有这么个需求，希望给文章或者帖子给一个摘要，最多3行，或者其它行数，超出3行会补上'...'。当然这种很简单，用css可以搞定。但是遇上要求多点的产品，希望补上的是'...查看全文'，这样的话就难办了。

我也在网上查了很多，至少我没发现有一个比较好的解决方案，也参考了微博和知乎的信息流，发现它们可能是根据文字的个数来算的，因为并没有看到有那种刚好'阅读全文'这4个字就处于最后一行的末尾。

微博效果：

知乎效果：

因此自己也鼓捣了一番，终于勉强搞出了自己一个还算比较满意的小库。整体的思路还是算每个字的宽度来计算出有多少行。因为web前端还是没有办法直接得到文本到底有多少行，所以这个计算还是比较麻烦。用的小技巧就是把每个字都包裹一个行内标签，计算这个行内标签的宽度。

我自己的项目效果：

项目已经放在github上了，npm上也已发布了，搜 text-overflow 即可

项目地址

demo地址

希望喜欢的同学，或者用的到的同学可以用起来，有问题也可以给我提issue，也别忘了给我的项目点star哦，这样我会继续更新下去的。

更多专业前端知识，请上【猿2048】www.mk2048.com

自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的相关推荐

css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
多行文本溢出显示省略号(…)全攻略
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-over ...
php exec多条命令怎么拼接_PHP--手摸手，教你撸一个会自动补全的命令行工具1
前言一次在使用symfony的时候,发现使用命令行的时候有些关键字会自动提示. 介绍随着laravel,symfony等框架的流行,命令行工具越来越流行,但是很多时候命令太多,根本无法记住所有参数 ...
转：【CSS/JS学习】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势...
本文来源:http://www.cnblogs.com/penghuwan/p/6682303.html 引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐 ...
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号核心css语句: 二.多行文本溢出显示省略号核心css语句: 效果图: 总结 HTML技巧篇:如 ...
多行文本溢出显示省略号(…)
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-over ...
web前端技术分享：多行文本溢出问题解决方案
大家在前端开发过程中可能会遇到需要将多行文本溢出部分隐藏并替换为省略号的情况,这里小千就来给大家介绍一下解决方案. 单行文本溢出及省略众所周知,在CSS3中单行文本省略一般使用text-overfl ...

自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的

自己写了一个多行文本溢出文字补全的小库, 说不定你会用得到的相关推荐

最新文章

热门文章