在前端开发过程中,我们经常会遇到控制文本显示一行或两行,超出显示省略号的需求,这个实现也非常简单,用css简单几行代码就搞定了。但是需求无处不在,现在需要将文本控制为一行半或者两行半,这个貌似单纯用css是无法实现的,所以自己只能用js来实现了。
javascript控制文本显示一行半,超出显示省略号
<script type="text/javascript">
var dom = document.getElementsByClassName("love");
jsLine(1.5,dom);
function jsLine(line,className){
var textLength=className[0]['childNodes'][0].length;//文本长度
var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size").substr(0,2);//获取字体大小
var lineNum=Math.round(className[0].clientWidth/fontSize);//四舍五入,一行有多少字
if(textLength>(lineNum*line)){
var newText=className[0].innerText.substr(0,(Math.round(lineNum*line)))+'...';
className[0].innerText=newText;
}
}
</script>
这里已经封装好了方法jsLine(line,className)
,可以直接拿去用的,其中line
参数是控制文本显示的行数,一行半就是1.5,两行半2.5,className
是要控制的文本类名,记住要使用类选择器哦。
实现原理:
利用文本宽度/文本大小= 一行有多少字符
,然后一行有多少字符*需要控制的行数=需要显示的字符数
,需要显示的字符数有了,后面的就简单了,用substr()
截取就行了。
这里面会遇到一个问题,如果没有对当前的文本font-size
属性做设置的话,dom[0].style.fontSize
会获取不到文本大小,有的朋友可能会说不设置那就是浏览器默认字体大小了,但是当前文本可能会继承其父类的font-size
属性,也就是说并不是浏览器默认字体大小。那应该怎么解决呢?
var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size")
这行代码能让你获取浏览器渲染之后的字体大小。