文字超出省略号显示

单行

要在CSS中实现一行文字超出省略号显示，可以使用text-overflow属性。text-overflow属性指定了当文本溢出容器时如何显示。

首先，需要设置容器的宽度，并将其设置为一个固定值。例如，设置容器的宽度为200px：

.container {
  width: 200px;
}

接下来，使用white-space属性将文字限制为一行，并使用overflow属性将溢出的内容隐藏。设置overflow属性为hidden可以隐藏溢出的内容，而不会显示滚动条：

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

最后，使用text-overflow属性来指定溢出时的显示方式。设置text-overflow为ellipsis可以在溢出时显示省略号：

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

这样，当文字超过容器宽度时，会显示省略号。

多行

如果要在CSS中实现多行文字超出省略号显示，可以使用CSS的属性-webkit-line-clamp和-webkit-box-orient（适用于WebKit浏览器）或者display: -webkit-box; -webkit-line-clamp; -webkit-box-orient（适用于Chrome浏览器）。

首先，设置容器的宽度和高度，并将其设置为固定值。例如，设置容器的宽度为200px，高度为60px：

.container {
  width: 200px;
  height: 60px;
}

然后，使用display: -webkit-box; -webkit-line-clamp; -webkit-box-orient属性来限制文本的行数和方向。设置-webkit-line-clamp属性为所需的最大行数，设置-webkit-box-orient属性为vertical可以实现垂直方向的文本溢出隐藏：

.container {
  width: 200px;
  height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最大行数为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

最后，使用text-overflow: ellipsis属性来显示省略号：

.container {
  width: 200px;
  height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最大行数为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样，当文字超过容器的高度时，会显示省略号。