CSS文本溢出效果&滚动条样式设置

一.文本溢出

　　1.overflow:

　　　　hidden;  超出文本会被剪裁隐藏不可见

　　　　scroll;超出文本会被剪裁， 显示滚动条

　　　　auto; 如果文本超出会显示滚动条，没超出不会显示，

　　　　overflow-x:设置横向滚动条hidden | scroll

　　　　overflow-y:设置纵向滚动条

　　　　inherit;从父级继承overflow属性

　　2.white-space:如何处理元素内的空白

　　　　pre:保留空白，在编译器中文本是怎样排版，浏览器中就怎样排版

　　　　nowrap:不换行，直到遇到<br>

　　　　pre-warp:保留空白，正常换行

　　　　pre-line:不保留空白，正常换行

　　3.text-overflow:有超出的文本时怎样显示

　　　　clip:不显示省略号，仅裁切

　　　　ellipsis:当文本溢出时显示省略号标记

二.文本溢出显示省略号效果

　　　　1.定义盒子的宽度

　　　　2.强制文本在一行内显示

　　　　3.溢出内容设为隐藏　　

　　　　4.溢出文本显示为省略号　

三.文本溢出显示渐变消失效果

/*先设置盒子相关属性*/
div{
 height:18px;
 width:50px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: clip;
 position:relative;
}
/*在盒子里面靠右位置添加一个渐变的白色透明背景*/
div::before{
content: '';
height:15px;
width: 10px;
position: absolute;
right: 0;
padding-left: 10px;
background: linear-gradient(to right,rgba(255,255,255,0.5),rgba(255,255,255,1));
}

四.滚动条样式设置

注意：在IE和Edge浏览器下可能不会生效！

::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。

::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece ：内层轨道，需要注意的就是它会覆盖第三个属性的样式。

::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner ：边角，两个滚动条交汇处

::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

滚动条显示在class为box的一个盒子里

/* 滚动条整体 */
.box::-webkit-scrollbar{
  width: 8px;
  height: 100px;
  background-color: white;
}
/* 滚动条滑块 */
.box::-webkit-scrollbar-thumb{
  width: 10px;
  height: 50px;
  background-color: #D6D6D6;
  border-radius: 5px;
}