[分享]css两行第二行超出省略不设置高度

CSS的超出省略是一个非常常见的效果，在一些设计风格中用得比较多。而当两行文本展示时，如果第二行超出部分采用省略号来展示，则可以通过以下CSS来实现：.line2ellipsis { display:...

CSS的超出省略是一个非常常见的效果，在一些设计风格中用得比较多。而当两行文本展示时，如果第二行超出部分采用省略号来展示，则可以通过以下CSS来实现：

.line-2-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
} 

上述CSS的原理就是利用了WebKit内核的box等特性，来对文本进行行数限制。为了实现两行第二行超出省略的效果，我们将display属性设置为-webkit-box，并将行数限制为两行，其中-webkit-box-orient表示容器内部的排列方式，vertical表示垂直排列；-webkit-line-clamp表示最多显示的行数，这里是2行。为了控制超出部分不出现在容器外部，我们还需将overflow设置为hidden。而为了展示省略号，text-overflow属性则需要设置为ellipsis。

然而，这样的方式还存在一个问题：第一行与第二行一样长时，可能会出现第二行省略号出现在第一行的效果。这种情况下，我们可以通过以下CSS来避免此情况发生：

.line-2-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
} 

上述CSS中的word-break就是用来解决这个问题的，将它设置为break-all即可。这样，就可以实现两行第二行超出省略的效果了。