javascript控制文本显示一行半,超出显示省略号

在前端开发过程中,我们经常会遇到控制文本显示一行或两行,超出显示省略号的需求,这个实现也非常简单,用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")

这行代码能让你获取浏览器渲染之后的字体大小。

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值