css中文本不换行显示省略号和换行后显示省略号

在CSS中，要实现文本不换行、显示省略号，和在文本换行两行后显示省略号，可以使用white-space、overflow、text-overflow和-webkit-line-clamp等属性。以下是一些示例：

1. 文本不换行，显示省略号

当文本长度超出容器宽度时，你可以使用overflow、white-space和text-overflow属性来阻止文本换行并显示省略号（…）。

.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
}

HTML 结构：

<div class="ellipsis">这是一段很长的文本，当容器宽度不足以容纳它时，会显示省略号...</div>

2. 文本换行两行后显示省略号

要实现文本在换行两行后显示省略号，你需要使用-webkit-line-clamp属性，这个属性是WebKit浏览器特有的（如Chrome和Safari），不过大多数现代浏览器都支持它。请注意，这个属性并不是一个标准的CSS属性，因此在一些非WebKit浏览器中可能不起作用。

.ellipsis-lines {
  display: -webkit-box; /* 使用WebKit的弹性盒模型 */
  -webkit-line-clamp: 2; /* 限制显示的文本行数 */
  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

HTML 结构：

<div class="ellipsis-lines">
  这是一段很长的文本，当容器高度不足以容纳两行文本时，会显示省略号...
</div>

请注意，由于-webkit-line-clamp是一个非标准属性，它可能不会在所有浏览器中工作。在需要兼容更多浏览器的情况下，你可能需要使用JavaScript库或插件来实现类似的功能。

此外，text-overflow: ellipsis;只适用于overflow值为hidden的元素，并且white-space的值不能是nowrap以外的值（对于单行文本省略的情况）。对于多行文本省略的情况，你需要使用上面提到的WebKit特有的属性。

最后，确保你的容器有明确的宽度或高度，以便正确应用这些样式。如果容器没有设置尺寸，那么文本可能不会按预期的方式显示省略号。