共计 940 个字符，预计需要花费 3 分钟才能阅读完成。
批改滚动条款式
| ::-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> |
正文完
