css文字超出省略号

/* 设置单行文字超出省略号 */
.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

/* 设置多行文字超出省略号（例如3行） */
.text-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;：当文本被截断时，使用省略号 (...) 表示。

2. 多行文字超出省略号：

   • display: -webkit-box;：使用弹性盒子模型来布局子元素。
   • -webkit-box-orient: vertical;：设置子元素垂直排列，确保多行文本按行显示。
   • -webkit-line-clamp: 3;：限制最多显示3行文本，超出部分用省略号表示。
   • overflow: hidden; 和 text-overflow: ellipsis;：同样用于隐藏超出部分并用省略号表示。