html怎么多行超出省略号,css+js 如何实现多行文字超出显示省略号（需要同时兼容ie chrome等浏览器）...

chrome浏览器下

ie11浏览器下

html

`

`

css

`

.trainInfo_text {

position: relative;

margin: 10px 0 10px 10px;

width: 286px;

font-size: 16px;

color: #868789;

line-height: 35px;

overflow: hidden;

}

.p-after:after {

content: "...";

position: absolute;

bottom: 0;

right: 0;

padding-left: 40px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -moz-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(left, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

`

JS

`

$('a').each(function(i, obj){

var lineHeight = parseInt($(this).css("line-height"));

var height = parseInt($(this).height());

console.log("123",lineHeight,height);

if((height / lineHeight) >3 ){

$(this).addClass("p-after");

$(this).css("height","85px");

}else{

$(this).removeClass("p-after");

}

});

`

要求IE跟各个浏览器下显示一样 保留三行 三行超出文本显示省略号