CSS超过两行省略号的处理方法

一、文本溢出显示省略号

当CSS文本内容过长，无法在对应的容器或者浏览器视口中完全展示时，我们可以采用CSS属性text-overflow和overflow等方法，来实现以省略号结尾的文本显示效果。

例如，我们可以通过如下代码实现文本超出隐藏，省略号结尾的效果：

.text {
  white-space: nowrap; /*禁止换行*/
  overflow: hidden; /*隐藏溢出部分*/
  text-overflow: ellipsis; /*结尾以省略号...显示*/
}

二、CSS超过两行部分为省略号

CSS文本内容超过两行时，将部分文字省略并显示省略号，是一种常见的展示方式。我们可以通过如下代码实现：

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /*指定要显示的行数*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

若CSS文本过长，则只会显示前两行文字，超过部分将展示省略号。

三、CSS超过三行部分为省略号

与超过两行部分为省略号的方式类似，我们可以通过如下代码实现CSS文本超过三行部分省略的效果：

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3; /*指定要显示的行数*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在此基础上，我们可以通过调整line-clamp的值，指定要显示的行数，以实现不同行数部分省略的效果。

四、CSS文本超出显示省略号其他实现方法

除了以上提到的基于text-overflow和-webkit-line-clamp实现省略号的方法，还有以下其他实现方式：

1、使用JavaScript动态计算文本节点的实际高度，判断是否需要添加省略号。

2、使用CSS3动画实现点击展开、收起省略号的效果。

3、使用canvas绘制文本，并通过JS计算文本宽度，超出部分用省略号代替。

五、总结

CSS超过两行省略号是一种常见的前端处理方式，可以通过text-overflow和-webkit-line-clamp等CSS属性实现。除此之外，还有其他实现方式，如JavaScript动态计算、CSS3动画和canvas绘制等。在实际开发中，应根据需求选择最合适的实现方式。