css 多行加省略号

对于一些长文本的展示，一般为了避免过长导致页面的排版混乱，我们都会采用“溢出省略”(oveflow: hidden; text-overflow: ellipsis) 来实现。但是，当文本占用多行时，我们需要用到CSS多行省略号来实现。下面我们就来介绍一下CSS多行省略号是如何实现的。

.ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}
    

首先，我们需要采用"-webkit-box"来创建一个块级容器，然后，我们需要将这个容器的最大行数限制（-webkit-line-clamp）为期望的行数。最终在容器的设置中，我们需要使用 "overflow:hidden" 属性，使得文本溢出时被隐藏。这样，当文本占用多行时，CSS多行省略号就完成了。

总之，CSS多行省略号是一种简单而有效的文本省略显示手段，以其省略一定长度的文本而受到网页设计人员的青睐。掌握它，将为您的网页排版提供便利。

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