常用css 文本 样式 滚动条css 样式

常用css 

 

文本不换行，直到遇到 br 标签。

white-space:nowrap;

前提设定宽度.

一行文本 省略号

       text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

 

多行文本省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

 

textarea去掉拖拽大小，隐藏滚动条

overflow:hidden;//隐藏滚动条 resize:none;//禁止拖拽修改textarea大小

 

字符间距

letter-sapcing:2em

首行缩进

text-indent:2em;

 

 

滚动条（各个浏览器有兼容问题）

::-webkit-scrollbar {  滚动条区域
    width: 20px; 宽度 y轴
    height: 3px; 高度 x轴
    background-image: #f00;
}

 

::-webkit-scrollbar {  滚动条区域蒙层
    width: 20px;
    height: 3px;
    background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
}

 

::-webkit-scrollbar-thumb {  滚动滑块样式   宽高自动的
    border-radius: 0;
    transition: all .2s;
    border-radius: 0.25rem;
}

 

/* start--文本行数限制--start */
.u-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.u-line-2 {
    -webkit-line-clamp: 2;
}

.u-line-3 {
    -webkit-line-clamp: 3;
}

.u-line-4 {
    -webkit-line-clamp: 4;
}

.u-line-5 {
    -webkit-line-clamp: 5;
}

.u-line-2, .u-line-3, .u-line-4, .u-line-5 {
    overflow: hidden;
	word-break: break-all;
    text-overflow: ellipsis; 
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}