css设置文本,元素超出盒子自动换行,并且超出盒子范围出现滚动条,自定义滚动条的样式

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

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

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

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

你可能感兴趣的:(css和html)