[分享]css两行溢出省略号

在前端开发中，我们经常遇到一些需要将超出一定长度的文本进行省略处理的情况。在这种情况下，我们可以使用CSS中的两行溢出省略号技术。这个技术可以竖直方向上截断文本并将其替换成省略号，让页面更加美观。在C...

在前端开发中，我们经常遇到一些需要将超出一定长度的文本进行省略处理的情况。在这种情况下，我们可以使用CSS中的两行溢出省略号技术。这个技术可以竖直方向上截断文本并将其替换成省略号，让页面更加美观。

在CSS中，我们可以使用如下代码实现两行溢出省略号：

 .two-line-ellipsis {
        /* 定义两行高度并设置超出内容不显示 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        /* 显示省略号 */
        text-overflow: ellipsis;
        /* 确保浏览器支持自动换行 */
        word-wrap: break-word;
    } 

我们可以看到，在两行溢出省略号技术中主要使用了-webkit-box-orient，-webkit-line-clamp和text-overflow属性。其中-webkit-box-orient属性用来设定排列方式为竖排列，-webkit-line-clamp属性表示在指定高度下最多显示几行，overflow:hidden则用来隐藏超出高度的内容。

而text-overflow则用来设定秒数的文本溢出，让省略号显示出来。同时，我们还需要添加word-wrap属性以确保浏览器支持自动换行。

在实际使用过程中，我们可以将.class-name直接应用到我们需要省略处理的元素上即可使用这项技术，如下所示：

<p class="two-line-ellipsis">
    这里是需要进行两行溢出省略号处理的文本
</p> 

这个技术的应用范围非常广泛，可以用于文章标题、产品卡片等元素中。需要注意的是，不同的浏览器对这个技术的支持程度不同，具体使用时应该进行测试。