前端常用的css

原创已于 2025-05-26 16:04:52 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-25 09:47:31 首次发布

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了多种CSS技巧，包括禁用用户选中、设置字体大小、限制表单输入、实现文本溢出省略号效果等。此外还展示了如何通过CSS控制布局、文本显示及输入验证等方面的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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: 1; /* 显示的行数 */
    line-clamp: 1; /* 显示的行数 */
    -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;
}


// 设置滚动条样式
.ant-table-body {
    &::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #cbcbcb;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
}

全局添加背景置灰：

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

标签识别\n换行：

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