[分享]css内容超过2行显示省略号

在Web开发中，经常会遇到一些内容比较长的情况，如果不加处理，在没有足够的空间的情况下，会导致页面排版错乱。因此，我们需要对文本进行处理，让其在不足以显示全部内容的情况下，能够显示省略号。这就是今天我...

在Web开发中，经常会遇到一些内容比较长的情况，如果不加处理，在没有足够的空间的情况下，会导致页面排版错乱。因此，我们需要对文本进行处理，让其在不足以显示全部内容的情况下，能够显示省略号。这就是今天我们要介绍的CSS技巧——显示省略号。
这个CSS技巧是利用了text-overflow属性，该属性定义了当文本溢出包含元素时应该发生什么。默认情况下，当文本溢出包含元素时，其内容会继续显示出来，导致排版错乱。但是，我们可以使用text-overflow属性，设置将覆盖元素显示为省略号。
下面是一个例子，其中我们使用了p标签来定义一个段落，内容比较长。为了让文字能够进行省略处理，我们设置了white-space:nowrap和overflow:hidden属性，让文字不换行，超出父容器的部分隐藏，同时设置了text-overflow:ellipsis，让超出的部分显示为省略号。

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 

当然，我们也可以通过CSS3中的更加简洁的写法来实现相同的效果，只需要给父元素添加一个display:inline-block属性即可，代码如下：

.parent{
    display: inline-block;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
} 

这样，当父元素的宽度不足以容纳文本内容时，就会自动进行省略处理，并显示省略号。
总结一下，以上是使用CSS实现文字内容超过2行省略号的方法，可以用于处理一些长文本的情况。可以根据实际需求进行选择，如果想要更加简洁的CSS代码，可以使用CSS3的display:inline-block属性，能够更加方便简洁地实现文字省略的处理。