-webkit-line-clamp属性在IE上不生效的问题

-webkit-line-clamp本身不是一个正式的css属性，它目前适用于webkit为内核的浏览器。
所以，当我们需要保存两行字符，多出的部分用“…”替代的话，那么IE上市不会成功的。
正常状态是这样：

而在IE浏览器上面是显示这样的：

解决的代码如下：

.content {
  font-size: 14px;
  color: #4A4A4A;
  overflow: hidden;
  line-height: 26px;
  position: relative;
  height: 45px;
}

.content :after {
  content: '...';
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.8em;
  height: 45px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

这里会有个问题，展示如下所示：

图片中展示部分左手边会有些模糊，这个时候如果Firefox或者chrome等浏览器需要展示比较正常的话，那么就需要严格判断浏览器是否为IE浏览器，如果是那么才用当前的方式进行css样式修改。

本人用修改JavaScript代码的方式进行兼容，代码如下：

  var ms_ie = false;
  var ua = window.navigator.userAgent;
  var old_ie = ua.indexOf('MSIE ');
  var new_ie = ua.indexOf('Trident/');
  if ((old_ie > -1) || (new_ie > -1)) {
      ms_ie = true;
  }
      
  if ( ms_ie ) {
    document.documentElement.className += " ie";
  }

.content {
  font-size: 14px;
  color: #4A4A4A;
  overflow: hidden;
  line-height: 26px;
  position: relative;
  height: 45px;
}

.ie .content :after {
  content: '...';
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.8em;
  height: 45px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

目前来说是比较好的方式了。如果还有其它更好的方式，欢迎给我留言，谢谢！