您当前的位置: 首页 >  彭世瑜 html

HTML单行、多行超出不换行显示省略号使用Clamp.js兼容IE

彭世瑜 发布时间:2019-09-18 10:41:12 ,浏览量:2

1、单行超出不换行,显示省略号

width: 770px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、多行超出不换行,显示省略号

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*限制文本行数*/
-webkit-box-orient: vertical;

3、兼容万恶的IE

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

可以使用 Clamp.js

https://github.com/josephschmitt/Clamp.js

代码示例

var titles = document.getElementsByClassName("p-title");
for (var i = 0; i             
关注
打赏
1688896170
查看更多评论
0.0746s