[分享]css两行超出省略不能省略

在网页设计中，CSS是必不可少的，它可以让网页更加吸引人、美观动人。但是，在CSS中也会遇到一些问题，比如两行过长超出省略问题。对于一些较长的文本，在网页上显示时可能会出现内容没有完全显示出来的情况。...

在网页设计中，CSS是必不可少的，它可以让网页更加吸引人、美观动人。但是，在CSS中也会遇到一些问题，比如两行过长超出省略问题。

对于一些较长的文本，在网页上显示时可能会出现内容没有完全显示出来的情况。这时候，我们可以通过CSS的样式来解决这个问题。其中有一种方法就是使用“两行超出省略”。

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

在上面的样式中，我们使用了display: -webkit-box;来让文本显示成块级元素，然后使用-webkit-box-orient: vertical;来设置文本的排列方向垂直。而-webkit-line-clamp: 2;则表示只读取并显示两行文本。如果要读取三行，则将数字2改为3即可。

同时，我们还需要使用overflow: hidden;来隐藏超出的文本部分，同时使用text-overflow: ellipsis;来添加省略号。

综上所述，使用“两行超出省略”这种样式，可以让网页的内容更加简洁明了，让阅读体验更加愉悦舒适。