js实现多行文本超出一定字数显示省略号功能

时间:2024-01-02 22:19:20

最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介、产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了。在经过查阅、整理之后,我也算是实现了这个效果。

页面中原来的表现可能是这样的。

js实现多行文本超出一定字数显示省略号功能

而我想把它变成这样

js实现多行文本超出一定字数显示省略号功能

这里面发生了什么。。。

我赶紧来解释解释

我利用js获取了目标元素的文本长度,然后通过传参,给它一个需要对比的字数,如果内容比参数大,就截取从0到参数位置部分,显示在页面中。

像我这样记忆力不足的人还是需要烂笔头的帮助的,我会一步步的把步骤写下来,尽可能帮助自己理解记忆并且更希望帮助到看到这篇文章的人。

function wordlimit(cname,wordlength){//1.首先,定义函数,其中两个参数,参数一是目标元素,也就是需要显示省略号的那个元素;参数二是需要限制的字数。

var cname=document.getElementsByClassName(cname);//2.定义变量cname,即目标元素

  for(var i=0;i<cname.length;i++){//3.这里写了个循环,因为目标元素不止一个,之前找到一个通过获取id来截取字段实现效果的,但是如果目标元素有多个,id每个又不能相同,就显得麻烦了

    var nowLength=cname[i].innerHTML.length;//4.定义变量nowLength,里面存储的是每一个目标元素所包含的字数。

    if(nowLength>wordLength){//这里做一些判断,如果现在的每个目标元素里面的字数多于我们需要限制的字数

      cname[i].innerHTML=cname[i].substr(0,wordlength)+' . . . ';//每个目标元素的内容就会被改变为当前内容的字符长度从0开始然后一直截取到需要限制的字数位置。

    }

  } 

}

最后一步,调用函数。

wordlimit(core,10)

意思就是class为core的目标元素只显示10个字符,多余部分用省略号代替。

这样就写完了...虽然我也觉得比较简单,但毕竟是自己琢磨出来的成果,如果哪里写的不全面,欢迎来指正。