单/行文字溢出省略

常规做法

html

<p class="text"></p>

css

/*单行*/
.text {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap; 
}
/*多行*/
.text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; //行数 
	overflow: hidden; 
}

兼容性做法

.text{
	position: relative;
	line-height: 20px;
	max-height: 40px;
	overflow: hidden;
}
text::after{
	content: "...";
	position: absolute;
	bottom: 0; 
	right: 0; 
	padding-left: 40px; 
	background: -webkit-linear-gradient(left, transparent, #fff 55%); 
	background: -o-linear-gradient(right, transparent, #fff 55%); 
	background: -moz-linear-gradient(right, transparent, #fff 55%); 
	background: linear-gradient(to right, transparent, #fff 55%); 
}