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

JS实现文本一行半或两行半显示省略号

最新推荐文章于 2024-01-08 16:53:15 发布

原创最新推荐文章于 2024-01-08 16:53:15 发布 · 3.5k 阅读

9 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

11 篇文章

订阅专栏

前端开发中，用CSS可实现文本一行或两行显示并超出省略，但一行半或两行半显示单纯用CSS无法实现，需用JS。文中封装了JS方法，参数可控制显示行数，还提到实现原理及获取文本大小可能遇到的问题和解决办法。

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

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