html+css实现容器显示两行文本超出部分以省略号显示 - 陌路人博客

html+css实现容器显示两行文本超出部分以省略号显示-陌路人博客-第1张图片陌路人

陌路人博客(molure.cn)
用心传递快乐,初心不变。

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

html+css实现容器显示两行文本超出部分以省略号显示-陌路人博客- 第4张图片

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;
}
//以此类推 可以实现四行、五行、甚至更多
(molure.cn)


×

感谢您的支持,我们会一直保持!

html+css实现容器显示两行文本超出部分以省略号显示-陌路人博客- 第6张图片
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:陌路人博客 » html+css实现容器显示两行文本超出部分以省略号显示
标签: 教程

发表评论

表情
看不清楚?点图切换

网友评论(0)