关于css:写一写会经常用到的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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理