王朝235网址导航
立即发布
当前位置:首页 > CSS代码 > 正文
文章资讯分类

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

  • 时间:2022-09-22
  • 作者:王朝235导航
  • 阅读:3 次


一.文本溢出


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

王朝235网址导航版权声明:

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

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

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

4、若文章存在违法信息,请举报