css文本超出后隐藏

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zyq19930325/article/details/88220613

1.单行

部分浏览器还需要加宽度width属性。

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

2.多行

1、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示

2、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

4、-webkit-line-clamp 是一个 不规范的属性

.ellipsis {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

3.使用:after

.ellipsis  {
    position:relative;
    line-height:1.6em;
    height:3.2em; //height高度是line-height的2倍
    overflow:hidden;
}
.ellipsis:after {
	content:"...";
 	position:absolute;
    bottom:0;
    right:0;
    font-weight:bold;
	padding-left: 20px;
}