Html 使用pre-tag时另一个div上的内容重叠

我的网页如下所示：

我尝试输入一些水平长度的代码块，如下所示：

输入此代码段后，主代码的内容在右侧部分重叠。我希望我的内容留在main中（如果pre中有溢出，可能会有一个滚动条）

我试图修复

div

的CSS，它包含main中的内容（position、overlap-x等）

我认为

pre

（我使用的是prism.CSS）的CSS没有问题，因为它在其他地方工作得很好

---

谢谢

请看下面的示例。 默认情况下，

溢出

属性是可见的。我们需要将其设置为

自动

，以便在溢出（您的案例）时显示滚动条。如果没有溢出，则不会出现滚动条。这意味着

auto

要更好地理解它，请查看文档：

部分{
浮动：左；
宽度：20%；
背景色：红色；
}
梅因先生{
浮动：左；
宽度：60%；
背景颜色：绿色；
溢出：自动；
}

部分
部分

如果要避免长文本（URL）的滚动，请将这些应用于

pre

标记

---

您希望显示水平滚动条，还是希望文本中断到下一行？是的，完全正确。不过，我不想修改pre-tag的CSS，因为它在其他地方工作得非常好（打断到下一行）。所以，我怀疑我的主布局有问题。请看一下我的最新答案。

pre{
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;

}