css设置文本元素超出盒子自动换行,并且超出盒子范围出现滚动条,隐藏浏览器的默认滚动条

2,017 阅读1分钟

文本超出自动换行

//设置文本自动换行,行内元素数字字母需要设置,块级标签一般会超出自动换行。

div {
   word-wrap: break-word; //设置文本自动换行
   word-break: normal;
}

//超出盒子设置滚动条,并且自定义滚动条样式,以下滚动条样式最好都设置。

div {   //这是外部div
  width: 100px;
  height: 700px;
  overflow: auto; /*当内容超过,出现滚动条*/
}
/* 设置滚动条样式 */
::-webkit-scrollbar {
  /*滚动条整体*/
  width: 20px;
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  /*滚动条轨道*/
  background: #fff;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面的滑块*/
  border-radius: 10px;
  background: #333;
}
::-webkit-scrollbar-thumb:hover {
  /*滚动条鼠标事件,鼠标放上去出现的事件*/
  background: gray;
}
::-webkit-scrollbar-corner {
  /*滚动条边角*/
  background: #fff;
}

//隐藏浏览器的默认滚动条

在<body>之前加上这条html代码:<body style="overflow:-Scroll;overflow-y:hidden" >

//想显示底部x轴的滚动条

  overflow-x: auto;
  white-space: nowrap;  //文字强制不换行