CSS文本溢出效果&滚动条样式设置
阅读原文时间:2023年07月09日阅读:1

一.文本溢出

  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;
}

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章