css 文字省略号 多行

CSS文字省略号是在网页设计中非常实用的一种排版方式，可以有效地处理较长的文本信息，为用户提供更好的使用体验。在CSS中，通过使用text-overflow属性，我们可以轻松地实现文字省略号的效果。

text-overflow属性主要有两个值：clip和ellipsis。其中，clip指的是将超出文本框的文本部分剪裁掉，而ellipsis则表示使用省略号代替被剪裁的文本。

在单行文本的情况下，我们可以直接使用text-overflow:ellipsis来实现省略号效果。下面是示例代码：

    .text-ellipsis {
        white-space: Nowrap; /*禁止换行*/
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*使用省略号代替*/
    }

但是，在多行文本的情况下，上述方法就无法生效了。这时候，我们需要引入一个新的属性：-webkit-line-clamp。该属性可以控制文本在多行显示时的行数，并且兼容性很好。

下面是使用-webkit-line-clamp属性实现多行文本省略号的CSS示例代码：

    .text-multi-line {
        display: -webkit-Box;
        -webkit-line-clamp: 3; /*显示3行*/
        -webkit-Box-orient: vertical; /*纵向排列*/
        overflow: hidden; /*超出部分隐藏*/
    }

在使用多行省略号时，还需注意使用display: -webkit-Box;的方式来将文本排成多行，而不是使用常见的display: block;，否则无法实现省略号效果。

综上所述，使用CSS文本省略号是实现网页文本排版的重要方式之一，它不仅可以使文本信息更加清晰、美观，还可以提高用户体验。