css多行省略号后面带查看更多

/* 示例代码：实现多行文本省略号并在后面显示“查看更多” */

.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制文本显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.text-container::after {
  content: "查看更多";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 根据背景颜色调整 */
  padding-left: 5px;
}

解释说明：

1. display: -webkit-box; 和 -webkit-box-orient: vertical;：这些属性用于将文本容器设置为弹性盒子，并使内容垂直排列。
2. -webkit-line-clamp: 3;：限制文本显示的行数为3行，超过的部分会被隐藏并用省略号代替。
3. overflow: hidden; 和 text-overflow: ellipsis;：确保超出部分被隐藏，并在最后一行添加省略号。
4. position: relative;：使容器内的伪元素（如“查看更多”）能够相对于该容器进行绝对定位。
5. .text-container::after：通过伪元素在文本末尾添加“查看更多”的提示，并使用绝对定位将其放置在文本的最后一行右侧。

如果需要根据实际背景颜色调整“查看更多”文字的背景色，可以修改 background 属性。