Login

I show a lot of code on my site. The rest of my site is responsive, but the "pre" tag refuses to shrink and display horizontal scroll bars. Here's a screenshot of my content getting cut off due to the long "pre" tag at the top:

[![enter image description here][1]][1]

I'm using overflow:horizontal, but you can see in the example that it doesn't work. Here's the actual link [enter link description here][2]

[1]:

[2]:

[To see links please register here]

As soon as I switch my theme, it works fine! I'm using a child theme of the Genesis Framework...

Pre tag displays preformated text, and preserves spaces and line breaks and is fixed. Declare the white-space normal or pre-wrap.

pre {
white-space: normal;
}

I don't know why nobody gave the answer of:

pre {
white-space: pre-wrap;
}

It preserves the lines and words while at the same time wrapping the lines if there isn't enough space.

You need to assign a width to the element, so that the content can overflow.
Try setting `width: 100vw`, for example, and it will work.

If your pre tag has margin/padding to the sides for your actual website layout, try `width: calc(100vw - 40px)` whereas in this example `40px` relates to a margin of 20px to both sides. Replace it with your own actual margin/padding.

As of 2022, you can achieve this without hard-coding widths by setting `overflow: auto` on the element you want to scroll.

Often this isn't enough, because the element has already enlarged its parent before the overflow property is checked. So you usually have to set `overflow: auto` on a bunch of parent/grandparent/etc. elements as well, to stop them from enlarging themselves. Normally this would mean they would also get scroll bars, but their children having `overflow: auto` prevents this (because when the children scroll, there's nothing extending beyond the parents' boundaries).

It also helps to set one of the parents to `display: flex`.





div.container {
display: flex;
flex-direction: column; /* Optional */
overflow: auto;
border: 1px solid red;
}

pre {
overflow: auto;
}



<html>
<body>
<div class="container">
<div>This text won't scroll</div>
<pre>
This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll.
</pre>
</div>
</body>
</html>

robinett862

neon512

Drbrassie4

snottiest555341

Mrpolarize976