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

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

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

微博效果:

知乎效果:

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

我自己的项目效果:

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

项目地址

demo地址

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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言简单程序情话,给你一份程序员的“科技情话”,赶在双十一前脱单吧

说起程序员很多人第一印象都是呆板木讷但你们不知道程序员的浪漫花样给你一份程序员的“科技情话”赶在双十一前,和你暗恋的人表白吧~程序员的情书Void missing_you()For(timemeet_you;;time)Missing_you()自从遇见你,就没有一刻不想你-----------------…

记录好用的软件

【摘要】 平时用的很舒服的软件,做个记录,一直更新。 【Snipaste截图】 一般都会用QQ的截图工具,但是现在很少登QQ,Snipaste截图也很好用,只需要按F1即可截图。 【ScreenToGif】 ScreenToGif可以录制屏幕生成Gif文件。…

辗转相除法求最大公约数(c++)

#include <iostream> using namespace std;int main() {int m, n, r;cin >> m >> n;r m % n;while( r ){m n;n r;r m % n;}cout << n << endl;return 0; }转载于:https://www.cnblogs.com/yuzilan/p/10626177.html

x86上的Java最终字段没有操作?

我一直很乐于深入研究多线程编程的细节&#xff0c;尽管阅读了多年的CPU内存一致性模型&#xff0c;无等待和无锁算法&#xff0c;Java内存模型&#xff0c;实践中的Java并发性等知识&#xff0c;但我始终很喜欢。等等-我仍然会创建多线程编程错误。 总是令人惊奇的谦卑经历&am…

阿里90后工程师,如何用AI程序写出双11打call歌?

来自阿里巴巴的90后工程师芦阳&#xff0c;用业余时间开发了一套人工智能作词程序——名字叫做MusicGo&#xff0c;这个程序经过芦阳的“喂养”和设定&#xff0c;可以自己写饶舌歌曲。芦阳加入菜鸟也才仅仅四个月&#xff0c;这是他第一次参加双11备战。作为一名新员工&#x…

c语言常用英语单词大全下载,C语言实现英文单词助手

英文单词小助手的实现步骤&#xff0c;供大家参考&#xff0c;具体内容如下题目需求分析&#xff1a;英文单词小助手是帮助学生背诵单词的软件&#xff0c;用户可以选择背诵的词库&#xff0c;并可以编辑自己的词库&#xff0c;还应有词语预览学习功能。系统可以给出中文&#…

通过Jedis API使用排序集

在上一篇文章中&#xff0c;我们开始研究Jedis API和Java Redis Client。 在本文中&#xff0c;我们将研究Sorted Set&#xff08;zsets&#xff09;。 排序集的工作方式类似于集&#xff0c;因为它不允许重复的值。 最大的区别在于&#xff0c;在“排序集”中&#xff0c;每个…

编程历史

编程历史&#xff1a; 编程语言的历史早于真正意义的计算机的出现。19世纪就有"可编程的"织布机和钢琴弹奏装置出现&#xff0c;它们都是领域特定语言(DSL)的样例。 从1951年2014年&#xff0c;人类一共发明了256种编程语言&#xff0c;每一种语言的出现都带有某些新…

python删除字符串中指定字符

最近开始学机器学习,学习分析垃圾邮件,其中有一部分是要求去除一段字符中的标点符号,查了一下,网上的大多很复杂例如这样 import re temp "想做/ 兼_职/学生_/ 的 、加,我Q&#xff1a; 1 5. 8 0. &#xff01;&#xff01;&#xff1f;&#xff1f; 8 6 。0. 2。 …

vue结合ueditor富文本编辑器(换肤分离)

需求 (PC端)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件&#xff0c;简单的文本编辑发布功能,采用socket方式传输&#xff0c; 做法 当时看到这个需求&#xff0c;我觉得是不难的,就去github上找富文本编辑器&#xff0c;因为项目比较急&#xff0c;当时我…

linux中samba启动不了,Linux_RHEL5中不用关闭SELinux而成功启动Samba,RHEL5中的samba服务器启动后,能 - phpStudy...

RHEL5中不用关闭SELinux而成功启动SambaRHEL5中的samba服务器启动后&#xff0c;能看到共享目录&#xff0c;但是不能访问共享目录&#xff0c;告知权限不够。此时可以通过如下命令&#xff1a;tail /var/log/message看到如此提示&#xff1a;/home/lyy does not exist or perm…

使用MyBatis框架时发现的一些小bug

在大配置MyBatis.xml中&#xff1a; 不能有空节点属性 &#xff0c;否则启动服务器后点击登录没有反应。 异常问题&#xff1a; ause: java.sql.SQLException: Value 0000-00-00 00:00:00 can not be represented as java.sql.Timestamp&#xff1a; 解决办法&#xff1a; HTT…

JSF Tomcat配置示例

JavaServer Faces (JSF)是一个Web应用程序框架&#xff0c;旨在简化基于Web的用户界面的开发集成。 它用于开发和构建服务器端用户界面组件&#xff0c;并在Web应用程序中使用它们。 JSF技术基于Model-View-Controller (MVC)架构&#xff0c;并且通过在页面中使用可重用的UI组件…

野指针与内存泄漏那些事

野指针&#xff1a;不是NULL指针&#xff0c;是指向垃圾内存的指针 野指针成因&#xff1a; 1.指针变量没有被初始化&#xff1a;指针变量在创建时同时应当被初始化&#xff0c;要么将指针设置为NULL&#xff0c;要么让它指向合法的内存。 2.指针p被free或者delete,没有被设置为…

c语言入门经典案例,c语言入门经典案例及飞源代码.doc

c语言入门经典案例及飞源代码循环控制输出图案【程序1】题目&#xff1a;输出9*9口诀。1.程序分析&#xff1a;分行与列考虑&#xff0c;共9行9列&#xff0c;i控制行&#xff0c;j控制列。2.程序源代码&#xff1a;#include "stdio.h"main(){ int i,j,result; pri…

JS加密算法简单分析

这次分析百度音乐的评论请求的加密&#xff0c;首先先看包 看到有两个地方1. param&#xff0c;2. sign&#xff0c;基本可以断定sign是用的MD5加密的 那么我们从html页面分析入手&#xff0c;恰巧看到html代码中有写到这么一段 右键点击open in Source panel 熟悉的配方&…

RF新手常见问题总结--(基础篇)

RF新手常见问题总结--(基础篇) 学RF快一年了&#xff0c;经常碰到一些问题&#xff0c;有些同学也经常问到&#xff0c;这里总结一些&#xff0c;期望有人后续再补充&#xff0c;主要是响应群里--雪霁大神的号召&#xff0c;技术共享。废话少说&#xff0c;直接上干货了。1. 经…

Java自动拆箱陷阱。 谨防!

您认为以下代码段会显示什么&#xff1f; Object o true ? new Integer(1) : new Double(2.0); System.out.println(o);是! 它将打印&#xff1a; 1.0什么&#xff1f; 1.0&#xff1f; 但是我已经为我的o变量分配了一个Integer 。 为什么打印1.0&#xff1f; 事实证明&…

golang学习笔记(6)--面向接口编程

一、 duck typing duck typing意思是鸭子类型&#xff0c;我们把具备鸭子的行为等部分特征的一个东西叫做鸭子&#xff0c;这是鸭子类型的解释。其实&#xff0c;在go语言中是采用鸭子类型这种思想来实现接口这种编程方式的&#xff0c;我们把一个类只要实现了某接口的方法&…

c语言self用法,C/C++知识点之Self Numbers C语言 UVA640

本文主要向大家介绍了C/C知识点之Self Numbers C语言 UVA640&#xff0c;通过具体的内容向大家展示&#xff0c;希望对大家学习C/C知识点有所帮助。In 1949 the Indian mathematician D.R. Kaprekar discovered a class ofnumbers called self-numbers. For any positive integ…