前端常用的css

某段文字禁止用户选中效果

span {
    user-select: none;
}

// 设置10px字体
.xx {
    font-size: 12px;
    transform: scale(0.83);
    transform-origin: 0 0; // 左对齐
}

// 表单内元素禁用（比如输入框不能输入readOnly）
pointer-events: none;

// 超出N行以省略号形式显示

.css {
    /* 设置元素高度自适应 */
    height: auto;

    /* 设置超过四行用省略号显示 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 显示的行数 */
    -webkit-box-orient: vertical;
}

.css {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: N;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

// 有具体宽度可使用这个
width: 200px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;

// 英文加数字会显示参差不齐
.css {
    word-break: break-all;
}

// 3. 输入框只能输入数字
value = value.replace(/[^0-9]/gi, ''); 

// less 不使用类名只选中第一个元素
& > div {
  &:nth-child(1) {
    min-height: 15px;
  }        
}

// 日期框禁用本月之后的日期
current > new Date(moment(new Date()).subtract(-1, 'month').format('YYYY-MM')).getTime();  

// 选中非最后一个元素
li:not(:last-child) {
}

// 隐藏滚动条
&::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

全局添加背景置灰：

.body {
    -webkit-filter: grayscale(1);
}

标签识别\n换行：

// 标签识别\n换行
white-space: pre-line;