如何防止没有自动换行的可滚动元素使页面太宽？

Question

我正在尝试创建一个不会超出屏幕大小的文档页面。下面的示例有效，但是一旦我添加了一个包含大量文本的

<pre><code>

块，该文本就不会换行并导致水平滚动条变得可见。

我试图通过将

overflow-x: auto

添加到

<code>

元素来解决这个问题，这部分有效，但现在当页面调整大小时文本不再收缩，仍然会导致移动设备上出现滚动条。

checkbox.addEventListener("change", () => {
  code.style.display = checkbox.checked ? "" : "none";
});

.resize-wrapper {
  resize: horizontal;
  border: 1px solid black;
  overflow-x: auto;
}

.page {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

main {
  max-width: 600px;
}

code {
  display: block;
  overflow-x: auto;
}

<div class="resize-wrapper">
  <div class="page">
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <label><input id="checkbox" type="checkbox" />show code block</label>
      <pre id="code" style="display: none">
        <code>
          // Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </code>
      </pre>
    </main>
  </div>
</div>

在上面的示例中，

.resize-wrapper

代表完整的视口，我添加它只是为了更容易在 Stack Overflow 上进行尝试。

有没有办法告诉

<pre><code>

部分不要超出其父级的大小？

Answer 1

将

white-space: pre-wrap;

添加到您的

code

元素CSS

code {
  display: block;
  overflow-x: auto;
  white-space: pre-wrap;

}