1, outline: none; 去除input蓝色的边框
2,::-webkit-scrollbar { display: none} 加滚动条但是不显示滚动条
火狐的话需要再加一个属性:
.historical { scrollbar-width: none} historical 加滚动条的div名字
3,改变滚动条样式:
div::-webkit-scrollbar{ width:10px; height:10px; /**/ } div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } div::-webkit-scrollbar-thumb:hover{ background: #333; } div::-webkit-scrollbar-corner{ background: #179a16; }
参数说明
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
4,white-space: nowrap; 不让字体换行
5,文字超出部分用...显示
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
6.超出部分换行
word-wrap: break-word;
word-break: break-all;
overflow: hidden;