CSS 超长文本显示省略号的两种方法

要在CSS中实现文字超长时显示省略号，可以使用以下两种方法：

1. 使用 text-overflow: ellipsis 属性：这个属性可以将超出容器的文本显示为省略号。但是，要使此属性生效，还需要设置 white-space: nowrap 和 overflow: hidden 属性。这样，当文本超出容器宽度时，就会显示省略号。

.container {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

2. 使用 display: -webkit-box 和 -webkit-line-clamp 属性：这种方法适用于单行或多行文本。使用 -webkit-line-clamp 属性可以指定要显示的行数，超出行数的文本将显示省略号。然而，这个属性只在WebKit浏览器（如Chrome和Safari）中有效。

.container {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 指定显示的行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden;
  text-overflow: ellipsis;
}

注意：以上两种方法都需要将文本内容放置在一个容器内，例如使用 <div> 元素包裹文本。