如何用HTML/CSS限制正文宽度，允许pre元素按需超出父容器？

嘿，这个需求我之前做个人博客的时候刚好碰到过！要实现正文固定最大宽度、但代码块能突破这个宽度并支持横向滚动，用纯CSS就能完美解决，给你两种实用的方案：

方案一：直接给代码块设置负外边距（最简单） #

利用CSS的calc()计算负外边距，把代码块拉到和视口同宽，同时开启横向滚动：

body {
  max-width: 650px;
  border: 1px solid red;
  margin: 2rem auto; /* 保持正文居中 */
  padding: 0 1rem; /* 给正文加左右内边距，避免文字贴边框 */
}

pre {
  border: 1px solid green;
  background-color: #eee;
  /* 核心样式 */
  overflow-x: auto; /* 代码超出时显示横向滚动条 */
  margin-left: calc(-50vw + 50%); /* 左外边距拉到视口左边缘 */
  margin-right: calc(-50vw + 50%); /* 右外边距同理 */
  padding: 1rem; /* 给代码添加内边距，提升可读性 */
}

原理说明 #

calc(-50vw + 50%)的作用是：用视口宽度的一半（50vw）减去父容器（body）的一半宽度，得到的负值外边距会把代码块的左右边界刚好对齐视口的左右边缘，同时保持和正文的居中基准一致。超出代码块宽度的部分会自动出现横向滚动条，完全不会影响正文的布局。

方案二：嵌套容器控制滚动（更灵活） #

如果需要对滚动区域做更多定制（比如添加背景色、阴影），可以给代码块套一个外层容器，把滚动逻辑放在容器上：

HTML结构调整 #

<body>
  <p>This is regular text that stays within the 650px max-width. It won't overflow even if the content is long, because the body has a max-width set.</p>
  
  <div class="code-wrapper">
    <pre><code>// 这里放超长代码示例：
const veryLongFunctionNameThatNeedsMoreSpace = (param1, param2, param3, param4, param5, param6) => {
  return param1 + param2 + param3 + param4 + param5 + param6;
};
</code></pre>
  </div>
</body>

CSS样式 #

body {
  max-width: 650px;
  border: 1px solid red;
  margin: 2rem auto;
  padding: 0 1rem;
}

.code-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow-x: auto;
  background-color: #f5f5f5; /* 给滚动容器加背景色 */
  padding: 0.5rem;
}

pre {
  border: 1px solid green;
  background-color: #eee;
  padding: 1rem;
  margin: 0; /* 去掉pre默认的外边距，避免和容器间距冲突 */
}

额外注意事项 #

• 如果页面有固定定位的导航栏或侧边栏，需要在calc()中减去对应元素的宽度，比如calc(-50vw + 50% - 200px)（假设侧边栏宽200px）。
• 给body添加左右内边距很重要，能避免正文文字直接贴到边框上，大幅提升阅读体验。
• 两种方案都能完美适配响应式布局，在手机上也能正常显示横向滚动的代码块。

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