文本超出两行显示省略号插件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});
}
上一篇: css控制文本显示行数,超出隐藏
下一篇: 兼容ie的文字超出显示省略号