批改滚动条款式
::-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>