css+js 如何实现多行文字超出显示省略号（需要同时兼容ie chrome

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

chrome浏览器下

ie11浏览器下

html
`
<p class="trainInfo_text" style="display: none;">
`

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跟各个浏览器下显示一样保留三行三行超出文本显示省略号

###

https://github.com/JasonSubMara/linelip

希望对你有帮助~