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：当⽂本溢出时显⽰省略号标记
html横向滚动条样式
⼆.⽂本溢出显⽰省略号效果
    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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。