HTML前端CSS实现只显示1行或者2行、3行剩余显示省略号

在CSS中，可以使用text-overflow, display, white-space属性来实现文本超出部分显示省略号的效果。以下是实现单行或多行文本截断并显示省略号的不同方法：

1. 单行文本截断（最多显示一行）：

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

2. 多行文本截断（最多显示两行、三行...）：

对于多行文本，可以使用display: -webkit-box;结合-webkit-line-clamp属性来实现。-webkit-line-clamp可以指定文本的最大行数，超出该数量的文本会被截断并显示省略号。

.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
  -webkit-line-clamp: 2; /* 限制在两行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

在HTML中使用这些类：

<div class="single-line-ellipsis">这是单行文本，将会显示为一行并在末尾有省略号...</div>
<div class="multi-line-ellipsis">这是多行文本，将会显示为两行并在超出的部分有省略号...</div>

注意：-webkit-line-clamp属性是非标准属性，且仅在基于WebKit内核的浏览器中有效，例如Chrome、Safari等。