最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介、产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了。在经过查阅、整理之后,我也算是实现了这个效果。
页面中原来的表现可能是这样的。
而我想把它变成这样
这里面发生了什么。。。
我赶紧来解释解释
我利用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个字符,多余部分用省略号代替。
这样就写完了...虽然我也觉得比较简单,但毕竟是自己琢磨出来的成果,如果哪里写的不全面,欢迎来指正。