单行和两行和超出三行超出显示省略号text-overflow: ellipsis；固定数字个数超出显示省略号

1.单行和两行显示省略号

（1）css（注意容器必须固定宽度）

* {
	margin: 0;
	padding: 0;
}
/*必须固定宽度*/
/*1行*/

.line1 {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*必须固定宽度*/
/*2行*/

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

/*必须固定宽度*/
/*3行*/

.line3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/*固定宽度*/

.w100 {
	width: 100px;
}

（2）html

<div style="width: 110px;margin: 50px auto 0;">
	<!--1行-->
	<div class="w100 line1" style="background: orange;color: #fff;">
		我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷
	</div>
	<!--2行-->
	<div class="w100 line2" style="background: blue;color: #fff;margin-top: 50px;">
		我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷
	</div>	
	<!--3行-->
	<div class="w100 line3" style="background: blue;color: #fff;margin-top: 50px;">
		我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷我很酷
	</div>	
</div>

（3）效果

3.固定数字个数超出显示省略号

function more(v){
	return v.length > 20? v.slice(0,20)+"..." : v;
}

此栗子是超出20个字符，如果需要可自行修改个数