美文网首页
多行溢出隐藏显示省略号的兼容性问题

多行溢出隐藏显示省略号的兼容性问题

作者: 一枚倔强的程序员 | 来源:发表于2018-05-19 10:56 被阅读0次

    超出一行隐藏显示省略号,相信大家都已经很熟悉了,用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代码

    这样就可以解决浏览器不兼容的问题了

    相关文章

      网友评论

          本文标题:多行溢出隐藏显示省略号的兼容性问题

          本文链接:https://www.haomeiwen.com/subject/yzrydftx.html