css文字溢出显示省略号

/*chrome*/
{
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

/*ie ff chrome  但是只能显示一行*/
{
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

兼容各浏览器，多行显示

    
...

.mutil-line-ellipsis {
	width: 400px;
	height:75px;
	line-height: 25px;
	border: 5px solid #AAA;
    line-height: 25px;
    overflow: hidden;
}

/*相当于之前的prop*/
.mutil-line-ellipsis:before {
	content: '';
	float: left;
	width: 5px;
	/*缩小宽度为5px，其余属性不变*/
	height: 75px;
}

/*相当于之前的main*/
.mutil-line-ellipsis> :first-child {
	float: right;
	width: 100%;
	margin-left: -5px;
	/*让main元素左移5px，这样main元素在宽度上就完全占满了父元素；*/
	word-break: break-all;
}

/*相当于之前的realEnd*/
.mutil-line-ellipsis:after {
	content: '...';
	box-sizing: content-box;
	float: right;
	position: relative;
	width: 50px;
	height: 25px;
	top: -25px;
	/*等于高度的负值，就是文字的行高*/
	left: 100%;
	/*而设置margin-left: -50px、padding-right: 5px则是为了让realend元素的盒模型的最终宽度计算为5px。*/
	margin-left: -50px;
	padding-right: 5px;
	font-size: 13px;
	text-align: right;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);
}