[分享]css两行文字省略号

在网页设计中，我们经常会遇到需要将一段过长的文字进行省略的情况。CSS中，有一种简单的方法可以实现这一效果，即使用“两行文字省略号”。具体实现方法如下： p { overflow: hidden; t...

在网页设计中，我们经常会遇到需要将一段过长的文字进行省略的情况。CSS中，有一种简单的方法可以实现这一效果，即使用“两行文字省略号”。

具体实现方法如下：

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

上面的代码中，我们首先将p标签的overflow属性设置为hidden，这样，在p标签内，超出其容器的部分将被隐藏，不会影响页面的美观程度。然后，我们使用text-overflow属性来将省略号显示出来。这里使用的省略号是CSS自带的，不需要再进行特别处理。

接下来，我们将p标签的display属性设置为-webkit-box，这样，p标签内的文本会按照块状元素的方式进行布局，并且在超过盒子宽度时会自动换行。接着，我们使用-webkit-box-orient属性将p标签内的文本朝垂直方向排列。最后，我们使用-webkit-line-clamp属性将p标签内的文本显示为两行，并将超出部分截断，并自动添加省略号。

以上就是使用CSS实现“两行文字省略号”的方法。如果在实际应用中有其他需要注意的地方，可以根据具体情况进行细节的调整。希望这篇文章对大家有所帮助！