如何避免无自动换行的<pre><code>元素导致页面过宽？

核心解决方案 #

要让代码块适配父元素尺寸，同时兼顾缩放和移动端体验，试试以下CSS组合方案：

• 给<code>添加white-space: pre-wrap和overflow-wrap: break-word，让过长代码自动在单词边界换行，避免强制拆分单词
• 给<pre>保留overflow-x: auto，极端场景下仍提供横向滚动兜底
• 给父容器（比如你的.resize-wrapper）设置width: 100%+max-width: 100vw，同时加上box-sizing: border-box，确保内边距不会额外增加容器宽度

示例代码：

.resize-wrapper {
  width: 100%;
  max-width: 100vw;
  padding: 1rem;
  box-sizing: border-box;
}

pre {
  margin: 0;
  overflow-x: auto;
}

code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

可选调整 #

如果允许拆分长单词以更紧凑适配宽度，可以把overflow-wrap: break-word替换为word-break: break-all，这样连超长的连续字符（比如长URL）也能拆分换行。

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