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

Bootstrap赋予响应式、移动设施优先的流式栅格系统供应了非常丰富的样式类，基于这些了能够做出患上多灾看的效果，虽让供应了罕用基础样式类，但有一些对于比特别的需要比如bootstrap供应了text-truncate样式类，应用这个类能够轻松实现单行文字溢出容器时主动隐蔽并在末端处显示省略号效果，然而如果希望在容器内显示两行或者三行文字越过整体省略号显示这种定制性需要，就不对于应的类需要自身去实现。

下列是一个css实现的两行及三行文字省略显示效果实现，供人人参考：

1. //容器最年夜显示两行文字越过整体省略号展现
2. .text-truncate-2{
3. -webkit-line-clamp:2;//这里便是最年夜显示两行
4. overflow:hidden;
5. text-overflow:ellipsis;
6. display:-webkit-box;
7. -webkit-box-orient:vertical;
8. }
9. //容器最年夜显示三行文字越过整体省略号展现
10. .text-truncate-3{
11. -webkit-line-clamp:3;//这里便是最年夜显示三行
12. overflow:hidden;
13. text-overflow:ellipsis;
14. display:-webkit-box;
15. -webkit-box-orient:vertical;
16. }
17. //以此类推能够实现四行、五行。。。省略效果

本文链接：https://addon.ciliseo.com/htmlcss-shi-xian-rong-qi-xian-shi-liang-xing-wen-ben-chao-chu-bu-fen-yi-sheng-lve-hao-xian-shi.html