码迷,mamicode.com
首页 > 其他好文 > 详细

overflow(超出部分省略号)

时间:2017-03-04 14:14:21      阅读:579      评论:0      收藏:0      [点我收藏+]

标签:size   滚动条   ant   回车   white   隐藏   div   cal   ide   

溢出:
overflow:visible/hidden/scroll/auto/inherit;

visible:默认值、不剪切。
hidden:超出部分剪切、没有滚动条。
scroll:超出部分有滚动条。
auto:自适应,有滚动条。
inherit:继承父元素的overflow得值。

空余空间:
white-space:pre/pre-wrap/nowrap/pre-line/inherit;

pre:识别回车和空格、不换行。
pre-wrap:识别回车和空格、换行。
nowrap:不识别回车和空格、不换行。
pre-line:识别回车、不识别空格、识别换行。
inherit:继承父元素的white-space属性。


实例:
(1)单行实现省略号:

width:valve;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipse;

(2)

可以不要设置高 自适应 别忘了overflow:hidden;

.box{
  width: 100%;
// height: .70rem;
// line-height: .36rem;
  margin: .2rem 0 .4rem;
  font-size: .28rem;
  overflow: hidden;
}

//超出部分隐藏(可设置多行之后省略号)

//两行超出隐藏
.overhide {
  display: -webkit-box !important;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
//一行超出隐藏
.overhideline1 {
  display: -webkit-box !important;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

 

overflow(超出部分省略号)

标签:size   滚动条   ant   回车   white   隐藏   div   cal   ide   

原文地址:http://www.cnblogs.com/xiangru0921/p/6501074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!