"pre" tag not shrinking. Not showing Horizontal scroll Bar

Question

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:

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

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

score 7 · Accepted Answer · edited Aug 25 '19 at 03:34

7

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.

edited Aug 25 '19 at 03:34

Robin Wieruch

14,900
10
82
107

answered Aug 23 '16 at 16:42

Guy Waldman

457
3
12

Your previous comment worked (before your edit!). You used a unit "vw" that seems to solve the problem. Setting it to "500px" simply causes a fixed width and the pre element doesn't shrink beyond that. Change your comment back to the "vw" one and I'll mark as answered :D – Bhagwad Jal Park Aug 23 '16 at 16:48
I thought of percentage at first, but that wouldn't work as its parent doesn't have a fixed width and it doesn't either. `vw` seemed to cut off the phrase (wouldn't display) and also seemed like a cheap workaround. But if it works for you, then all the better. Changed it back :) – Guy Waldman Aug 23 '16 at 16:55
Yes, sorry, didn't notice. Original answer was `width: 100vw`. – Guy Waldman Aug 23 '16 at 17:02

score 4 · Answer 2 · answered Feb 16 '18 at 16:37

4

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.

answered Feb 16 '18 at 16:37

VocoJax

1,469
1
13
19

3

Wrapping lines or showing a horizontal scroll are two different behaviors. – Jarad Feb 28 '21 at 08:31
This can look pretty ugly in some cases, not really a solution per se. – Jesse Nickles Dec 07 '22 at 16:53

score 2 · Answer 3 · answered Aug 12 '22 at 16:22

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>

score -1 · Answer 4 · answered Aug 23 '16 at 16:38

-1

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

answered Aug 23 '16 at 16:38

Vcasso

1,328
1
8
14

This simply causes the lines to break. I don't want them to break. I want them to be a full line and display a horizontal scroll bar so that the user can scroll to see the full code... – Bhagwad Jal Park Aug 23 '16 at 16:42
If you do white-space as normal. There's no sense of using `pre` – Siraj Alam Jun 01 '18 at 19:01
In the previous answer with pre-wrap you said that solved your problem, and you gave me -1. Yet, If you read my answer you would notice that I said the same thing. – Vcasso Jun 07 '18 at 21:15

"pre" tag not shrinking. Not showing Horizontal scroll Bar

4 Answers4

Linked