css省略号

/* 单行文本溢出显示省略号 */
.single-line {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  width: 200px; /* 设置一个固定宽度 */
}

/* 多行文本溢出显示省略号 (WebKit浏览器，如Chrome和Safari) */
.multi-line {
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
}

解释说明：

1. 单行文本溢出显示省略号：

   • white-space: nowrap;：防止文本换行。
   • overflow: hidden;：超出容器宽度的部分会被隐藏。
   • text-overflow: ellipsis;：当文本溢出时，使用省略号 (...) 表示。

2. 多行文本溢出显示省略号（适用于 WebKit 浏览器，如 Chrome 和 Safari）：

   • display: -webkit-box;：将对象作为弹性伸缩盒子模型显示。
   • -webkit-box-orient: vertical;：设置子元素垂直排列。
   • -webkit-line-clamp: 3;：限制显示的行数为 3 行。
   • overflow: hidden;：超出部分隐藏。
   • text-overflow: ellipsis;：当文本溢出时，使用省略号 (...) 表示。