CSS 实现文本省略显示【单行，2行，多行】

CSS可以通过设置text-overflow, white-space, 和 overflow 属性来实现文本的省略显示。

单行文本省略显示：

.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
}

两行文本省略显示（部分浏览器不支持）：

.multi-line-ellipsis {
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2; /* 限制在两行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}

多行文本省略显示（兼容性较好）：

.multi-line-ellipsis {
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 添加省略符号 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 3; /* 根据需求设置行数 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}

在HTML中使用：

<div class="single-line-ellipsis">这是单行文本省略显示的例子</div>
<div class="multi-line-ellipsis">这是两行文本省略显示的例子，需要更多行时可以扩展类名或者修改CSS属性</div>

注意：多行文本省略显示的-webkit-line-clamp属性需要一个整数来指定显示的行数。这种方法主要是针对WebKit内核的浏览器，对于大多数现代浏览器都有效，但不适用于IE。