css3单行省略和多行省略

CSS3中实现文本单行省略和多行省略的方法是使用text-overflow属性配合其他属性。

单行省略：

.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
}

多行省略需要使用-webkit-line-clamp属性，该属性是一个不是标准的CSS属性，它需要配合display: -webkit-box和-webkit-box-orient: vertical使用。

多行省略（例如显示3行）：

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

注意：-webkit-line-clamp属性是一个不是标准的属性，它在非WebKit浏览器中可能不会生效。以上代码主要适用于WebKit内核的浏览器，例如Chrome、Safari等。