✖  
登陆

还没有账号? 立即注册

忘记密码?
登陆
✖  
注册

已经有账号?马上登陆 购买邀请码

立即注册

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

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
window 环境下IIS网站https配置免费的HTTPS认证服务教程
« 上一篇 07-12
网站禁止PC端访问代码 手机端访问
下一篇 » 07-12

发表评论

  • 泡泡
  • 阿呆
  • 阿鲁
  • 蛆音娘
    没有更多评论了