css 超过一行/多行显示省略号... - 附示例

在CSS中，要实现当文本内容超过一行或多行时显示省略号（ellipsis），可以使用以下CSS属性：

1. overflow: 设置为 hidden 以隐藏超出容器的内容。
2. text-overflow: 设置为 ellipsis 以显示省略号。
3. white-space: 设置为 nowrap 以防止文本换行。
4. max-height 或 max-width: 根据布局情况设置最大高度或宽度，确保文本超出容器时能触发省略号效果。

以下是一个示例，展示了如何在一个容器中实现单行文本超出显示省略号：

.single-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML:

<div class="single-line-ellipsis">这是一段很长的文本，但在单行显示时会显示省略号。</div>

如果要实现多行文本超出显示省略号，可以使用-webkit-line-clamp属性（这是一个非标准属性，但在大多数现代浏览器中得到支持）：

.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置为想要的行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

HTML:

<div class="multi-line-ellipsis">这是一段很长的文本，它将在超过三行时显示省略号。</div>

请注意，多行文本省略号的实现依赖于-webkit-line-clamp，这个属性并不是所有浏览器都支持，因此在使用时需要考虑兼容性问题。