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) • With
div
tag (highlight no, scroll yes)
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 :)
code { white-space: pre-line; }
I got the same overflow issue. This works well for me.
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.