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

最新推荐文章于 2024-06-24 13:32:02 发布

fb_01

最新推荐文章于 2024-06-24 13:32:02 发布

阅读量6.5k

点赞数 2

分类专栏：前端小技巧文章标签： web 前端 javascript

本文链接：https://blog.csdn.net/fb_01/article/details/51345595

版权

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

5 篇文章 0 订阅

订阅专栏

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：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。