css多行文本溢出时出现省略号的示例

以下是“CSS多行文本溢出时出现省略号”的攻略：

1. 使用text-overflow: ellipsis属性

这是最常用的方法，可以通过设置text-overflow属性为ellipsis来实现：

.overflow-text {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上述CSS代码中，我们通过设置overflow属性为hidden来隐藏溢出的文本，同时将white-space属性设置为nowrap来禁止文本自动换行，最后通过设置text-overflow属性为ellipsis来添加省略号。

2. 使用Webkit后缀

如果你想要在Safari和Chrome浏览器上实现省略号效果，可以使用Webkit前缀：

.overflow-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

上述CSS代码中，我们先通过设置display属性为-webkit-box，将容器设置为块级容器，然后再使用Webkit前缀的-webkit-box-orient: vertical属性将文本垂直排列，并使用-webkit-line-clamp属性将文本限制为2行。最后同样是设置overflow为hidden和添加省略号。

以上就是“CSS多行文本溢出时出现省略号”的完整攻略，希望可以帮助到你。