CSS文本溢出文本显示省略号

在开发web页面的时候经常会遇到文本溢出的问题,如果任由它,那么就会使页面的布局被打破;如果文本标签h1~h6/P/span被我们设置了高度,然后溢出隐藏,这样也能实现视觉效果上的美化,今天就给大家总结一下另外的一种处理办法,文本溢出出现省略号。

单行文本溢出文本显示省略号

  • .ellipsis {   display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

多行文本溢出文本显示省略号

  • .ellipsis { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » CSS文本溢出文本显示省略号
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏