单行多行文本溢出显示省略号

在CSS中，你可以使用text-overflow属性来实现文本溢出显示省略号。同时，你还需要结合white-space和overflow属性来控制文本的换行和溢出隐藏。下面分别介绍单行和多行文本溢出显示省略号的方法：

单行文本溢出显示省略号： 对于单行文本，我们可以通过以下CSS来实现溢出省略号的效果：

.single-line {
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 控制文本溢出时的显示方式 */
  text-overflow: ellipsis; /* 使用省略号来表示文本溢出 */
}

多行文本溢出显示省略号：

.multi-line-ellipsis {
  display: -webkit-box; /* 将元素视为一个弹性伸缩盒子 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素垂直排列 */
  overflow: hidden; /* 溢出内容隐藏 */
  -webkit-line-clamp: 3; /* 控制显示的行数 */
}

需要注意的是，-webkit-line-clamp是一个非标准的WebKit属性，在某些浏览器中可能不被支持。为了兼容性，你可能需要添加一些浏览器前缀或考虑使用JavaScript等其他方法来实现多行文本的省略号显示。由于上面的二个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个 webkit- 来兼容一部分浏览器。