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

常用class 总结

时间:2018-03-30 20:09:23      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:for   content   元素   hidden   flow   play   样式   size   psi   

清除浮动

// Clearfix
@mixin clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

滚动条样式(隐藏)

@mixin scrollHide {
  &::-webkit-scrollbar {
    display: none;
  }
}

强制不换行超出文字省略号

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

多行情况下第line行超出文字省略号

@mixin multiEllipsis($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical; // 从上向下垂直排列子元素。设置或检索伸缩盒对象的子元素的排列方式 
  text-overflow: ellipsis; //文本溢出 用省略号显示
  -webkit-line-clamp: $line; // 多少行省略
  overflow: hidden;
  word-break: break-all;
}

$px为需要转换的rem

// px 转 rem 的默认
$browser-default-font-size: 16px;

@function pxTorem($px){
  @return $px / $browser-default-font-size * 1rem;
}

常用class 总结

标签:for   content   元素   hidden   flow   play   样式   size   psi   

原文地址:https://www.cnblogs.com/mayufo/p/8677837.html

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