DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动

作者：System 时间：2024年08月22日分类：所有,css 字数：452

要实现当盒子内容超出指定宽度时，不自动换行，而是以滚动条的形式水平滑动，可以通过设置元素的 overflow 属性为 auto 或 scroll 来实现。以下是一个简单的例子：

HTML:




<div class="scroll-box">
  这里是很长的内容，如果内容超出盒子宽度，将会以滚动条的形式进行滚动。
  <!-- 内容 -->
</div>

CSS:




.scroll-box {
  width: 200px; /* 设置盒子宽度 */
  overflow-x: auto; /* 水平滚动条 */
  white-space: nowrap; /* 防止内容换行 */
}

在这个例子中，.scroll-box 类对应的元素将会在内容超出其宽度时显示水平滚动条，以便用户可以水平滑动查看全部内容。white-space: nowrap; 属性用于防止内容自动换行。