常用css样式总结

1.超出显示省略号

.title {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
// 超出两行显示...
 overflow : hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;

2.内容局左居中对齐

  .tip {
    text-align: center;
  }
  .content {
    display: inline-block;
  }
  .status-tip,
  .remark-tip {
    text-align: left;
  }
  <div class="tip">
    <div class="content">
      <div class="status-tip">
        提交结果:审核成功
      </div>
      <div class="remark-tip">
        备注: TEST
      </div>
    </div>
  </div>

3.超出可以滚动,但不显示滚动条

overflow-x: scroll;
white-space: nowrap;

&::-webkit-scrollbar {
display: none;
}

4.flex布局

// flex-direction决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
// flex-wrap 是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
// flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
// justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
// align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;

5. 修改placeholder颜色

input::-webkit-input-placeholder {
 color: @grey;
}

textarea::-webkit-input-placeholder {
  color: @grey;
}

6.不换行等分

// 不换行等分，盒子之间的间距可变，盒子的数量可变
.container {
   display: flex;
 }
 .box {
   flex: 1;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background: red;
   color: white;
 }
 .box + .box {
   margin-left: 20px;
 }
<div class="container">
  <div class="box">
    box1
  </div>
  <div class="box">
    box2
  </div>
  <div class="box">
    box3
  </div>
  <div class="box">
    box4
  </div>
  <div class="box">
    box5
  </div>
</div>

7.三等分

// 不换行的三等分
.container {
 display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.box {
  width: 25%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: red;
  color: white;
}
<div class="container">
 <div class="box">
   box1
 </div>
 <div class="box">
   box2
 </div>
 <div class="box">
   box3
 </div>
</div>
// 换行的三等分
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container::after {
  content: '';
  width: 30%;
  height: 100px;
}
.box {
  width: 30%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: red;
  color: white;
  margin-bottom: 15px;
}
<div class="container">
  <div class="box">
    box1
  </div>
  <div class="box">
    box2
  </div>
  <div class="box">
    box3
  </div>
  <div class="box">
    box4
  </div>
  <div class="box">
    box5
  </div>
</div>

8.textarea去掉右侧滚动条，去掉右下角拖拽

overflow:hidden; 
resize:none;

9.强制换行

word-break:break-all; /*支持IE，chrome，FF不支持*/

word-wrap:break-word;/*支持IE，chrome，FF*/

10.清除input默认样式

-webkit-appearance:none; 

11.修改antd placeholder颜色

.ant-input::-webkit-input-placeholder,
  .ant-time-picker-input::-webkit-input-placeholder {
    color: $light-gray-font-color;
  }

  .ant-input:-moz-placeholder,
  .ant-time-picker-input:-moz-placeholder {
    color: $light-gray-font-color;
  }

  .ant-input:-ms-input-placeholder,
  .ant-time-picker-input:-ms-input-placeholder {
    color: $light-gray-font-color;
  }

  .ant-select-selection__placeholder {
    color: $light-gray-font-color;
  }