超出一行隐藏显示省略号,相信大家都已经很熟悉了,用css样式来控制,而且没什么兼容性问题
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
一行超出隐藏显示省略号注意:要给它宽度
多行超出隐藏显示省略号也是可以用css样式来控制的,如下
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
多行超出隐藏显示省略号注意:要给它宽度和高度
嗯,看起来没什么问题,但是在某些浏览器打开发现是这个样子的
多行溢出样式控制有些浏览器不兼容发现-webkit-line-clamp是没有执行到的,测试了一下,发现在谷歌、QQ浏览器、搜狗浏览器,360浏览器的极速模式下是正常显示省略号的,在火狐、ie、360兼容模式下是没有显示省略号的,那么这个问题该怎么解决呢,这个时候,就要用到js啦
html代码 css代码 js代码这样就可以解决浏览器不兼容的问题了
网友评论