如何判断text-overflow: ellipsis???

最新推荐文章于 2024-09-11 06:30:00 发布

原创最新推荐文章于 2024-09-11 06:30:00 发布 · 6.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #前端 #javascript

前端小技巧专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种判断HTML中单行文本是否溢出的方法，并通过示例展示了如何使用JavaScript来实现这一功能。此外，还详细解释了scrollWidth、clientWidth和offsetWidth三个属性的区别与应用场景。

部署运行你感兴趣的模型镜像

1、单行文本超出经常使用省略号，如何判断文本是否超出？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
<title>test</title>
<style type="text/css">
#ellipsis{
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
</head>
<body>
	<div id="ellipsis">今天是你的生日，我的祖国！！！</div>
	<script>
		var clientWidth = document.getElementById("ellipsis").clientWidth;
		var scrollWidth = document.getElementById("ellipsis").scrollWidth;
		if(clientWidth<scrollWidth){
			alert("已省略……");
		}
	</script>
</body>
</html>

2、知识点拓展之offsetwidth clientwidth scrollwidth

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

您可能感兴趣的与本文相关的镜像