css 省略

/* 使用 CSS 实现文本省略效果 */

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px;        /* 设置容器宽度，可根据需要调整 */
}

/* 如果需要多行文本省略，可以使用以下代码（注意：浏览器兼容性可能有限） */

.multi-line-ellipsis {
  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;：当文本超出容器时，用省略号（...）代替超出的部分。
   • width: 200px;：设置容器的宽度，可以根据需要调整。

2. 多行文本省略：

   • display: -webkit-box;：将对象作为弹性伸缩盒子模型显示。
   • -webkit-box-orient: vertical;：设置子元素垂直排列。
   • -webkit-line-clamp: 3;：限制显示的行数为3行，超出部分用省略号表示。
   • 注意：多行文本省略在某些浏览器中可能不完全兼容，特别是非WebKit内核的浏览器。