如何实现带横向滚动的溢出div容器效果

我懂你想要的效果：让容器里的内容横向溢出，用户能通过左右滚动查看，就像默认的pre标签那样。之前用div尝试踩的坑，大概率是没抓对关键CSS属性，完全不用靠超大宽度或者float这种hack方法，用标准CSS就能轻松搞定。

核心解决方案 #

要实现这个效果，给你的div容器加上两个关键CSS属性就够了：

• overflow-x: auto：当内容超出容器宽度时，自动显示横向滚动条
• white-space: pre：保留内容的空格、换行，并且禁止自动换行（这是让内容横向溢出的核心，和pre标签的原生行为完全一致）

如果你的内容不需要保留换行，只是单纯不想换行、要横向溢出，可以把white-space换成nowrap，但pre更贴近pre标签的原生体验。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .horizontal-scroll-container {
      width: 300px; /* 可以设置固定宽度，也可用max-width、自适应父容器 */
      overflow-x: auto;
      white-space: pre;
      border: 1px solid #ccc; /* 可选，方便直观看到容器范围 */
      padding: 10px;
      font-family: monospace; /* 可选，让字体等宽，更贴近pre标签样式 */
    }
  </style>
</head>
<body>
  <div class="horizontal-scroll-container">
    这是一段超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长的文本，用来测试横向溢出滚动效果。
    这里有手动换行，用pre属性会完整保留这个换行哦！
    另外，多个    连续空格也会被保留，和pre标签的表现一模一样。
  </div>
</body>
</html>

为什么之前的方法没生效？ #

你提到只有设置超大宽度才有用，是因为默认情况下div容器会自动撑开宽度适配内容，或者内容会自动换行。而通过white-space: pre禁止自动换行，再用overflow-x: auto限制容器宽度并提供滚动能力，就能让内容在容器内横向溢出，而不是把容器撑大。

内容的提问来源于stack exchange，提问作者Deepak Kamat