欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

文本超出两行显示省略号插件Clamp.js

程序员文章站 2022-04-22 14:02:18
...

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

使用这几条css属性不兼容火狐和IE 所以采用插件的形式

 

Clamp.js下载地址:https://github.com/josephschmitt/Clamp.js

解压将clamp.js放入项目

<script src="js/clamp.js"></script>

文本需要使用p标签 span不行

js代码

var titles = document.getElementsByClassName("p-title");
var answers = document.getElementsByClassName("p-answer");
for (var i = 0; i < titles.length; i++){
    $clamp(titles[i], {clamp: 3});
    $clamp(answers[i], {clamp: 3});
}