css 限制显示行数，超出部分加上...（兼容IE）

在我们日常前端开发中，经常会遇到列表或者首页文本只显示几行等问题。

一般我们通过css 就可以解决。代码：

/*一行文本超出显示省略号*/
.one-line {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/*多行文本超出显示省略号*/
.two-line {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}

但是在IE中有兼容问题，虽然现在很少再兼容IE了。有兴趣的同学可以了解下。兼容IE

 // 处理多行文本超出部分隐藏
function wordLimit(cName, wordLength) {
  var cName = document.getElementsByClassName(cName);

  for (var i = 0; i < cName.length; i++) {
    var nowHtml = cName[i].innerHTML;
    var nowLength = cName[i].innerHTML.length;
    if ( nowLength > wordLength) {
      cName[i].innerHTML = nowHtml.substr(0, wordLength) + '…';
    }
  }
};