CSS控制文字只显示几行，超出一部分显示省略号

最新推荐文章于 2024-08-08 14:06:46 发布

eileen823

最新推荐文章于 2024-08-08 14:06:46 发布

阅读量5.9k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/eileen823/article/details/57417930

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

只有谷歌浏览器可以：

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<style>
.text1 {
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	white-space:nowrap;
}
.text2 {
	width:200px;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
</style>
	</head>
	<body>

 
<div class="text1">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
 
<br />
 
<div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
	</body>
</html>

多个浏览器兼容：

 #rightcontent  p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
#rightcontent p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}