CSS3——让最后一行显示省略号

最新推荐文章于 2024-08-20 13:42:14 发布

shuai7boy

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本博客没有绝对权威，仅作参考。具体结果以实践为准~

本文链接：https://blog.youkuaiyun.com/shuai7boy/article/details/53203213

本文介绍了一种使用CSS实现文本溢出省略的方法，并通过-webkit-line-clamp属性设置文本显示的最大行数，使得超出部分被隐藏并以省略号代替。示例代码展示了如何在一个限定高度的div元素内实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
     #dv1{
	 width:200px;
	 text-overflow:ellipsis;
	 overflow:hidden;
	 border:1px solid blue;
	 display:-webkit-box;
	 -webkit-box-orient:vertical;
	 -webkit-line-clamp:3; /*后面的3是设置显示几行*/
	 }
	</style>
</head>
<body>

<div id="dv1">
实时订重置密码成功实时订重置密码成功实时订重置密码成功dsgsd实时订重置密码成功实时订重置密码成功实时订重置密码成功dsgsd
</div>
</body>
</html>