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; /* 超出部分用省略号表示 */
  width: 200px; /* 设置一个固定的宽度 */
}

解释说明：

1. 单行省略号：通过 white-space: nowrap 禁止文本换行，overflow: hidden 隐藏超出容器的内容，text-overflow: ellipsis 在超出时显示省略号。
2. 多行省略号：使用 -webkit-box 和 -webkit-line-clamp 来控制多行文本的显示行数，并在超出时显示省略号。注意，这种方法只适用于 WebKit 浏览器（如 Chrome 和 Safari）。