css文本超过三行显示省略号，补充单行显示省略号

为了实现文本超过三行显示省略号，同时单行文本显示完整，我们可以使用CSS的-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical来实现。这种方法主要适用于WebKit内核的浏览器，因此对于大多数现代浏览器是可行的。

以下是实现这种效果的CSS代码示例：

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 3行行高的大约高度 */
  line-height: 1.5em;
  max-width: 20em; /* 根据需要设置最大宽度 */
}
 
.ellipsis-singleline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 20em; /* 根据需要设置最大宽度 */
}

接下来是HTML部分：

<div class="ellipsis-multiline">
  这里是一段很长的文本，如果超过三行，则会显示为省略号。这样可以保持内容的整洁，同时为长文本提供良好的用户体验。
</div>
 
<div class="ellipsis-singleline">
  这是一段单行文本，不会显示为省略号。
</div>

在这个例子中，.ellipsis-multiline类使得元素内的文本超过三行时显示省略号，而.ellipsis-singleline类确保单行文本显示完整，同时超出容器宽度部分隐藏。