代碼標簽中的文本溢出而不是滾動

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%;
}

用<div>替換<code>標記消除了溢出問題，但突出顯示不起作用（此插件需要將代碼放入<code>標記中）

如何解決此溢出問題以提供滾動？ 還是我需要使用任何其他代碼高亮庫？

• 帶有code標簽（突出顯示是，滾動否）溢出 • 帶有div標簽（突出顯示否，滾動是）

Answer 1

不要在code元素中使用overflow屬性，而應該在pre元素中使用它。

pre ，默認情況下，有white-space: pre聲明，僅當 HTML 內部有<br>標簽或換行符時才會呈現新行，這就是文本在達到父元素的限制時不會中斷的原因. 有關更多詳細信息，請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/white-space 。

因此，在pre元素中使用overflow: auto應該可以解決它:)

Answer 2

 code { white-space: pre-line; }

我遇到了同樣的溢出問題。 這對我很有效。

Answer 3

我使用highlightjs遇到了類似的問題，並使用以下方法解決了它：

code {
  min-width: 100%;
  width: 0px;
  overflow: auto; /* Or scroll */
}

解釋

據我所知，為了讓子元素在父容器中引起溢出，在這種情況下，父容器應該有一個固定的width或min-width值。 而max-width: 100%對我不起作用。

所以我給了一個 static 值width: 0px導致溢出到 kick-in 和min-width: 100% 。 父元素遵循min-width ，因為min-width width更高的優先級。