文本在代码标签而不是滚动中溢出

Question

使用rainbow.js突出显示代码，导致<code>标记中的代码溢出（x）。 CSS溢出属性似乎不起作用（即使使用!important也是如此）

包含<code>标签的代码

<pre>
    <code>
            Any code to be highligted
    </code>
</pre>

CSS：

code {
    overflow: auto; /* Not working (scroll also not working) */
    width: 100%;
}

将<code>标签替换为<div>消除了溢出问题，但突出显示不起作用（此插件要求将代码放入<code>标签中）

如何解决此溢出问题以提供滚动？还是我需要使用其他任何代码突出显示库？

•使用code标签（突出显示是，滚动否）溢出 •使用div标签（突出显示否，滚动是）

Answer 1

您应该在overflow元素中使用它，而不是在code元素中使用pre属性。

pre默认情况下具有white-space: pre声明，该声明仅在其中的HTML具有<br>标记或换行符的情况下才显示新行，这就是为什么文本不会如果达到父元素的限制则中断。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/white-space。

因此，在overflow: auto元素中使用pre应该可以解决：）