html+css實現容器顯示兩行文本超出部分以省略號顯示

Bootstrap 給予響應式、移動設備優先的流式柵格系統提供了十分豐富的樣式類，基于這些了可以做出很多好看的效果，雖讓提供了常用基本樣式類，但有一些比較特殊的需求 比如bootstrap 提供了 text-truncate 樣式類，使用這個類可以輕松實現單行文字溢出容器時自動隱藏并在結尾處顯示省略號效果，但是如果希望在容器內顯示兩行或三行文字 超出部分省略號顯示這類定制性需求，就沒有對應的類需要自己去實現。

以下是一個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;
}
//以此類推 可以實現四行、五行。。。省略效果