css两行显示省略号

CSS中有一个文本溢出处理的属性，可以实现两行显示并自动省略的效果，即“text-overflow: ellipsis;”。接下来，我们将通过代码来实现这一效果。

/* 设置p标签的宽度，超出部分隐藏 */
p {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: Nowrap; /* 防止自动换行 */
}

/* 设置p标签的line-height和max-height，超出max-height后的文本显示省略号 */
p.two-line {
  line-height: 1.5em;
  max-height: 3em;
}

代码说明：

首先，我们需要设置p标签的宽度，并将其超出部分隐藏掉，防止影响页面布局。接着，我们使用text-overflow属性将溢出的部分显示为省略号。但是，这样设置会直接将整段文本都以省略号显示，无法实现两行显示的效果。因此，我们需要进一步设置line-height和max-height属性。其中，line-height属性设置行高，max-height属性设置最大高度。当文本超出两行，即超出3em时，文本部分就会被省略显示。

通过以上的简单设置，我们就可以轻松地实现两行显示并省略的效果了。这一效果在一些导航栏和博客等页面常常用到，非常实用。希望这篇文章能够帮助大家更好地使用CSS，实现更好的页面效果。