css多行省略号兼容ie,css超出2行部分省略号……，兼容ie

html>

Page Title

.wrap {

height: 40px;

line-height: 20px;

overflow: hidden;

}

.wrap .text {

float: right;

margin-left: -5px;

width: 100%;

word-break: break-all;

}

.wrap::before {

float: left;

width: 5px;

content: ‘‘;

height: 40px;

}

.text {

position: relative;

line-height: 18px;

height: 36px;

overflow: hidden;

}

.text::after {

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0 20px 1px 45px;

/* 为了展示效果更好 */

background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));

background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

}