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

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“钞能力。你在哪？”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

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. //以此类推 可以实现四行、五行。。。省略效果