当我使用 pre 标签时，内容在另一个 div 上重叠答案

【问题标题】：Content overlapping on another div when I use pre tag当我使用 pre 标签时，内容在另一个 div 上重叠
【发布时间】：2020-03-29 01:16:21
【问题描述】：

我的网页如下所示：

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

<pre><code>
URL = "https://example.com/73876544657687988976987654465768798657687988976/"
</code></pre>

一旦我进入这个sn-p，右边部分的主要内容就重叠了。我希望我的内容保留在 main 中（如果 pre 中有溢出，可能会有滚动）

我已尝试修复 div 的 CSS，其中包含 main 中的内容（位置、重叠 x 等）。

我认为pre 的 CSS 没有问题（我正在使用 prism.css），因为它在其他地方工作正常。

【问题讨论】：

你想要一个水平滚动条出现，还是让文本分到下一行？
是的，完全正确。不过，我不想修改 pre 标签的 CSS，因为它在其他地方工作得非常好（中断到下一行）。所以，我怀疑我的主要布局有问题。
请看我最新的回答。

标签： html css dom bootstrap-4

【解决方案1】：

请看下面的例子。默认情况下，overflow 属性为 visible。我们需要将其设为auto，以便在溢出的情况下会出现滚动条（您的情况）。如果没有溢出，则不会出现滚动条。这意味着auto。

为了更好地理解它，请查看文档：https://www.w3schools.com/css/css_overflow.asp

.section{
  float: left;
  width: 20%;
  background-color: red;
}
.main{
  float: left;
  width: 60%;
  background-color: green;
  overflow: auto;
}

<div class='section'>
  section
</div>
<div class='main'>
  <pre>
    <code>
URL = "https://example.com/73876544657687988976987654465768798657687988976/"
    </code>
  </pre>
</div>
<div class='section'>
  section
</div>

【讨论】：

【解决方案2】：

如果您想避免滚动冗长的文本（URL），请将这些应用到pre 标签

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;

}

【讨论】：