[分享]css两行以上显示省略号

在开发网页时，我们常常需要在一定的宽度下显示一行或者几行文本。但是，某些时候这个文本的内容可能会非常长，而且过长的文本有时候又不够美观。因此CSS提供了两行以上显示省略号的属性。overflow: h...

在开发网页时，我们常常需要在一定的宽度下显示一行或者几行文本。但是，某些时候这个文本的内容可能会非常长，而且过长的文本有时候又不够美观。因此CSS提供了两行以上显示省略号的属性。

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

overflow: hidden;属性表示当文本超出容器宽度时，隐藏多余的文本。text-overflow: ellipsis;用于在文本溢出容器时在文本末尾显示省略号。display: -webkit-box;将对象作为弹性伸缩盒子模型显示（类似 display:flex）。-webkit-line-clamp: 2;表示用两行来显示文本，超出的部分将被省略。-webkit-box-orient: vertical;属性表示盒子内的子元素按垂直方向排列。

overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

上面的代码中，我们也可以使用display: block;替代display: -webkit-box;，但是这种方法只能实现单行文本的省略。而使用display: -webkit-box;可以实现多行文本的省略。

除了使用-webkit-line-clamp来限制文本行数以外，也可以使用max-height来达到同样的效果。比如：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: 84px;
}

在这个例子中，我们设置了max-height为84px。当文本框高度超过这个值时，会自动省略掉多余的文本。这种方法也可以达到多行省略的效果。

在使用这些属性时，一定要注意浏览器的兼容性，不同浏览器有不同的前缀。