写一写会经常用到的CSS样式

修改滚动条样式

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba($color: #ffffff, $alpha: 0.7);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  &:hover {
    background-color: rgba(0, 0, 0, 0.53);
    cursor: pointer;
  }
}

禁止在页面中选中文本进行复制

-webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none; /*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none; /*用户是否能够选中文本*/

字体超出长度以...形式展示

width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 2;  //这个是控制显示几行以后...的
// 还有一些可以参考
word-break:break-all;// 以英文字母作为换行依据
word-wrap:break-word; // 以英文单词作为换行依据
white-space:pre-wrap;// 以中文作为换行依据

让文字平分宽度间距对齐

.tagLiTitle {
    width: 70px;
    height: 20px;
    margin-right: 20px;
    text-align: justify;
    color: #7cb305;
    i {
      display: inline-block;
      width: 100%;
    }
  }

使用的时候
<div class="tagLiTitle">XXX<i></i></div>