使用HTML和CSS实现容器显示两行文本超出部分以省略号显示

正文：

Bootstrap 提供了丰富的样式类，包括响应式和移动设备优先的流式栅格系统。这些样式类可以帮助我们实现各种漂亮的效果。虽然 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 实现容器显示两行文本超出部分以省略号显示