Text is overflowing in code tag instead of scroll

Question

Use of rainbow.js to highlight the code causing code in <code> tag to overflow (x). CSS overflow property doesn't seem to work (even with !important)

Code containing <code> tag

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

CSS :

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

Replacement of <code> tag with <div> eliminates the overflow problem but highlighting doesn't work (this plugin requires code to be put in <code> tag)

How can I resolve this overflow issue to provide scroll? Or do I need to use any other code highlighting library?

• With code tag (highlight yes, scroll no) Overflow • With div tag (highlight no, scroll yes)

Answer 1

Instead of using the overflow property in the code element, you should use it in the pre element.

pre, by default, has white-space: pre declaration, which renders new lines only if the HTML inside has a <br> tag or a newline character, and that's why the text won't break if reaches the limit of the parent element. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for more details.

So, using overflow: auto in the pre element should solve it :)

Answer 2

code {
  white-space: pre-line;
 }

I got the same overflow issue. This works well for me.

Answer 3

I had a similar issue using highlightjs and resolved it using:

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

Explanation

To the best of my knowledge, in order for child elements to cause overflow within a parent container, in this case, the parent container should have a fixed value for width or min-width. And max-width: 100% did not work for me.

So I gave a static value of width: 0px to cause overflowing to kick-in and min-width: 100%. The parent element obeys the min-width because min-width has higher precedence over width.