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

CSS代码
来源：站三界导航
204阅读
2022-09-22

一.文本溢出

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;
 50px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: clip;
 position:relative;
}
/*在盒子里面靠右位置添加一个渐变的白色透明背景*/
div::before{
content: '';
height:15px;
 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{
   8px;
  height: 100px;
  background-color: white;
}
/* 滚动条滑块 */
.box::-webkit-scrollbar-thumb{
   10px;
  height: 50px;
  background-color: #D6D6D6;
  border-radius: 5px;
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10362.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：什么是网站权重与如何提高网站权重

下一篇： CSS滚动条实现步骤及美化小技巧