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个字符，多余部分用省略号代替。

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