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) + '…';
    }
  }
};


点赞0
点击评论0
收藏0
浏览 30
 

还没有评论,快来发表第一个评论吧

免责声明:凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,注册用户和一般页面游览者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任(包括侵权责任、合同责任和其它责任)
*尊重作者,转载请注明出处!