css 多行省略号 兼容

CSS中有一种非常常用的样式技巧就是在文本中显示省略号。而在内容较多、宽度较小的情况下，需要显示多行省略号。今天我们来说一下CSS多行省略号兼容的问题。

首先，我们来看一下最简单的一种多行省略方式：

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    

这种方式在WebKit内核的浏览器中表现非常良好，可以很好地实现多行省略效果。但是，对于其他浏览器并不兼容，而且在某些情况下也会出现一些问题。

接下来，我们来介绍一种更加通用、兼容性更好的多行省略方式：

display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 3;
    -moz-box-line-clamp: 3;
    box-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    

这种方式可以在所有浏览器中都正常工作，同时可以保证在WebKit内核的浏览器中依然保持良好的效果。其中，-moz-box-orient和-moz-box-line-clamp是为了解决Firefox中多行省略失效的问题而添加的。

总的来说，使用第二种方式可以保证多行省略在各个浏览器中都兼容生效，而且在WebKit内核的浏览器中也能保持良好的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！