html+css实现容器显示两行文本超出部分以省略号显示

教程前言：

Bootstrap 优先考虑响应式和移动流式网格系统，提供了非常丰富的风格类。基于这些，它可以做出很多漂亮的效果。虽然它提供了通用的基本样式类，但是还有一些特殊的需求，比如 Bootstrap 提供了文本截断样式类。这个类可以很容易地实现当单行文本溢出容器时自动隐藏并在末尾显示省略号的效果。但是，如果您想在部分省略号显示之外的容器中显示两行或三行文本，则没有相应的类来实现。

下面是一个两行三行文本省略显示效果的css实现，供大家参考。

代码如下：

//容器最大显示两行文字 超出部分省略号展示
.text-truncate-2 {
  -webkit-line-clamp: 2;//这里就是最大显示两行
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
//容器最大显示三行文字 超出部分省略号展示
.text-truncate-3{
  -webkit-line-clamp: 3;//这里就是最大显示三行
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
//以此类推 可以实现四行、五行。。。省略效果

转载请注明：汇站网 » html+css 实现容器显示两行文本超出部分以省略号显示