[分享]css3文字超出第三排隐藏

CSS3提供了一种方法，可以隐藏一个元素中超出其父级元素的部分。对于文字，可以使用textoverflow属性实现此效果。如果我们有一段文字，需要在2行内完全显示，超过2行的部分隐藏，可以给该元素添加...

CSS3提供了一种方法，可以隐藏一个元素中超出其父级元素的部分。对于文字，可以使用text-overflow属性实现此效果。

如果我们有一段文字，需要在2行内完全显示，超过2行的部分隐藏，可以给该元素添加如下CSS：

 .text{
        white-space:nowrap;   /*强制不换行*/
        overflow:hidden;     /*超出部分隐藏*/
        text-overflow:ellipsis;   /*超出部分用省略号表示*/
        display: -webkit-box;
        -webkit-box-orient: vertical;  /*设置垂直排列*/
        -webkit-line-clamp: 2;         /*显示2行*/
    } 

其中，-webkit-box-orient和-webkit-line-clamp是只有Webkit内核浏览器才支持的属性。-webkit-box-orient设置垂直排列，-webkit-line-clamp控制显示的行数。

除此之外，还有一种更加灵活的方式可以实现文字的多行显示和超出部分的隐藏，那就是使用flex布局。

 .text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-flex: 1;
    }
    .text::after{
        content: "";   /*添加一个伪元素*/
        display: block; /*转换为块级元素*/
        height: 1em;    /*高度为1行*/
        margin-top: -1em;   /*将伪元素上移1行*/
        visibility: hidden; /*隐藏文本*/
    } 

这段代码使用了一个伪元素，在元素内部添加一个假的单行文本，并让它位于元素内的最后一行。然后使用相对定位将它上移1行，这就能够实现多行文本的显示。

以上两种方式都可以实现CSS3文字超出第三排隐藏，具体选择哪种方式可以根据实际需要进行选择。