CSS让文本只显示一行，超出部分隐藏或以三个点结束

最新推荐文章于 2024-06-07 11:15:24 发布

糖薪砖

最新推荐文章于 2024-06-07 11:15:24 发布

阅读量1.7w

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/tangxinzhuan/article/details/48518425

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style> 
.test
{
	border:1px solid #000000;
	/* 
		1、得是以配置为inline-block的元素，或默认以block呈现的div、p元素
		2、强制不换行
		3、固定宽度
		4、超出部分隐藏
		5、超出部分以'...'结尾
	*/
	display: inline-block; 
	white-space: nowrap;
	width: 140px; 
	overflow: hidden; 
	text-overflow:ellipsis;
}
</style>
</head>
<body>


<label class="test" >
	This is some long text that will not fit in the box
</label>

</body>
</html>