首页 > 其他 > 详细

overflow 之文字单行显示/三行显示

时间:2020-08-01 22:03:58      阅读:110      评论:0      收藏:0      [点我收藏+]

overflow:

内容溢出处理

overflow: 值如下

  • visible(默认)/ 溢出部分 可见
  • hidden(超出部分隐藏)/
  • scroll(出现滚动条)/
  • auto(浏览器自动处理)
  • text-overflow:clip(不显示省略标记,简单裁切) | ellipsis(文本溢出显示省略标记)文本溢出处理
  • white-space: normal / pre(空白被保留)/nowrap(不换行)/....

1、如果是只需要显示一行+省略号,那么就容易啦

{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
}

2、如果是需要显示2行或者更多+省略号

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

overflow 之文字单行显示/三行显示

原文:https://www.cnblogs.com/dingdc/p/13416127.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!