CSS文本超出2行就隐藏并且显示省略号

CSS提供了一个非常方便的属性text-overflow，可以用于超出指定行数的文本隐藏并显示省略号。

下面是一个完整的示例：

<style>
  .text {
    width: 200px;
    overflow: hidden;
    display: -webkit-box; /* 为了兼容性，需要加上前缀 */
    -webkit-line-clamp: 2; /* 行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
</style>

<div class="text">这是一段超出两行的测试文本，如果太长就会被隐藏并显示省略号。</div>

代码中，我们使用display: -webkit-box和-webkit-line-clamp来设置文本的行数，然后使用text-overflow来显示省略号。其中-webkit-box-orient: vertical;表示文本垂直排列。

另外，如果你想对多个元素同时生效，可以将class属性赋给它们。

<style>
  .text {
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
</style>

<div class="text">这是一段超出两行的测试文本，如果太长就会被隐藏并显示省略号。</div>
<div class="text">这是另一段超出两行的测试文本，如果太长就会被隐藏并显示省略号。</div>

这样，这两个元素的文本都会被限制在两行内，并且超出的部分会被隐藏并显示省略号。