一.文本溢出
1.overflow:
hidden; 超出文本会被剪裁隐藏不可见
scroll;超出文本会被剪裁, 显示滚动条
auto; 如果文本超出会显示滚动条,没超出不会显示,
overflow-x:设置横向滚动条hidden | scroll
overflow-y:设置纵向滚动条
inherit;从父级继承overflow属性
2.white-space:如何处理元素内的空白
pre:保留空白,在编译器中文本是怎样排版,浏览器中就怎样排版
nowrap:不换行,直到遇到
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;
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章