欢迎光临
我的个人博客网站

css超出隐藏显示省略号怎么设置?

css超出隐藏显示省略号怎么设置?

当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示。但是当标题过长的时候,就会造成换行显示。还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感。虽然我们可以使用overflow:hidden将超过宽度的字符隐藏掉。但是结尾看起来总会让人觉得有点僵硬。而且也不利于让用户知道后面还有没显示完的字符。最好的方法,就是将多余的字符用省略号来代替。

1. 单行文本超出显示省略号🎯

div{     /* 设置单行文本只需要三行代码即可搞定 */     overflow:hidden;     white-space: nowrap;     text-overflow: ellipsis;   }

 

解释说明:

  • white-space:nowrap: 设置文本不换行

  • overflow:hidden: 超出文本隐藏

  • text-overflow:ellipsis; 文本对象溢出显示 ...

 2. 多行文本超出显示省略号🎯

 注意:多行文本超出显示省略号只有-webkit内核才有作用

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

 

解释说明:

  • display: -webkit-box 作为弹性伸缩盒子模型显示

  • -webkit-line-clamp 限制文本显示行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中

  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式

赞(0) 打赏
未经允许不得转载:张拓的天空 » css超出隐藏显示省略号怎么设置?
分享到: 更多 (0)

评论 抢沙发

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

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

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

支付宝扫一扫打赏

微信扫一扫打赏