css文本超出显示省略号

一行：

p{
	width: 100px;
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}

2行或多行：

p{
	width: 100px;
	overflow:hidden;   //超出隐藏
    text-overflow:ellipsis;  //溢出显示省略号
    white-space: normal;  //常规默认，会折行
    display:-webkit-box;  
    -webkit-box-orient:vertical;  //子元素排列 vertical（竖排）orhorizontal（横排）
    -webkit-line-clamp:2;/*内容限制的行数 需要几行写几就行*/ 
}

还有另外的写法：

span{
	position: relative; 
	max-height: 40px;
	overflow: hidden;
	white-space: normal
}  
span::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%);  
 }