先看一下最终的效果图吧：
第一种文字内容超出显示滚动条：
父盒子：横向超出滚动：overflow-x: scroll;
.box {width: 100%;box-sizing: border-box;overflow-x: scroll;}
子盒子：内容不换行 white-space:nowrap;
.item {white-space:nowrap;}
实现效果，超出滚动：如下图：
这个会发现即使内容没超出还是有滚动条占位如下图：
这里吧**overflow-x: scroll;换成overflow-x: auto;**即可解决，如下图，让他自适应添加滚动条
第二种：自定义滚动条样式：如下图
.box::-webkit-scrollbar{height:9px;background-color: #969696;}.box::-webkit-scrollbar-track{background: #e2e2e2;border-radius:2px;}.box::-webkit-scrollbar-thumb{background: #969696;border-radius:8px;}.box::-webkit-scrollbar-thumb:hover{background: #a5a5a5;}.box::-webkit-scrollbar-corner{background: #969696;}
这样一款完美的横向超出自动添加滚动条功能就完成了，你学废了吗，点个赞吧：
