常用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; // 设置伸缩盒子元素排列方式 }