CSS中如何设置单行或多行内容超出后，显示省略号

在CSS中，可以使用以下属性来设置单行或多行内容超出后显示省略号：

1. 对于单行文本，使用text-overflow: ellipsis;属性。
2. 对于多行文本，可以使用-webkit-line-clamp属性结合display: -webkit-box;和-webkit-box-orient: vertical;。

以下是单行和多行文本超出显示省略号的CSS样式示例：

单行文本：

.single-line-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

多行文本：

.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是非标准属性，但是在大多数现代浏览器中得到了支持。这意味着该方法主要适用于使用Webkit内核的浏览器，如Chrome、Safari等。