css怎么设置多行超出显示省略号

1. 什么是多行超出显示省略号

多行超出显示省略号指的是当一段文本内容过长超过一定宽度限制时，将超出的文本内容省略掉，并显示省略号。在某些场景下，我们需要将文本内容限制在一定的宽度范围内，但是又希望尽可能的显示更多的内容，这时我们就可以采用多行超出显示省略号的方式。

1.1 实际场景

多行超出显示省略号在各种网站及应用中都有广泛的应用，比如：

商品列表页中显示商品的简介信息

文章列表页中显示文章的摘要

用户个人主页中显示个人简介信息

等等

2. CSS实现多行超出显示省略号

在CSS中，我们可以使用text-overflow属性来实现多行超出显示省略号的效果。不过需要注意的是，text-overflow属性只能用于单行文本的省略，如果要实现多行文本的省略，则需要结合使用其他CSS属性。

2.1 单行文本的省略

在单行文本的省略中，我们只需要使用text-overflow属性即可：

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的代码中，我们将宽度限制为200px，使用white-space: nowrap属性使文本不换行，使用overflow: hidden属性隐藏超出的部分，并使用text-overflow: ellipsis属性显示省略号。

效果图如下所示：

2.2 多行文本的省略

在多行文本的省略中，我们需要使用display: -webkit-box和-webkit-line-clamp属性来结合使用：

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的代码中，我们使用display: -webkit-box属性将元素设为一个弹性盒子，使用-webkit-line-clamp属性设置显示的行数，使用-webkit-box-orient: vertical属性设置弹性盒子中的子元素垂直排列，使用width: 200px属性设置元素的宽度，使用overflow: hidden属性隐藏超出的部分，并使用text-overflow: ellipsis属性显示省略号。

效果图如下所示：

2.3 兼容性问题

虽然使用display: -webkit-box和-webkit-line-clamp属性可以实现多行文本的省略，但是这两个属性都是webkit内核的私有属性，不被其他浏览器所支持。因此，如果要实现跨浏览器的多行文本省略，则需要使用一些JS库或者多写一些CSS代码来兼容性问题。下面是一个CSS实现跨浏览器多行文本省略的代码：

.ellipsis {
  position: relative;
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 5px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
}

上面的代码中，我们针对不同浏览器分别设置了多行文本省略的样式，使用了position: relative属性设定相对定位，使用max-height: 3em属性限制高度，使用display: -webkit-box属性设置元素为弹性盒子，使用text-overflow: ellipsis属性显示省略号。

效果图如下所示：

3. 总结

通过本文的介绍，我们了解了多行超出显示省略号的含义和实现方法。在实际开发中，我们可以根据需要选择不同的实现方法来满足项目需求。

重点总结：

多行超出显示省略号的方法需要使用display: -webkit-box和-webkit-line-clamp属性结合使用

多行文本省略需要注意兼容性问题，在多浏览器下采用不同的CSS实现方式

多行文本的省略不是CSS的原生功能，需要使用其他方法来实现