+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: CMS (https://0day.red/Forum-CMS)
+---- Forum: WordPress (https://0day.red/Forum-WordPress)
+---- Thread: "pre" tag not shrinking. Not showing Horizontal scroll Bar (/Thread-quot-pre-quot-tag-not-shrinking-Not-showing-Horizontal-scroll-Bar)
"pre" tag not shrinking. Not showing Horizontal scroll Bar - robinett862 - 07-27-2023
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...
RE: "pre" tag not shrinking. Not showing Horizontal scroll Bar - neon512 - 07-27-2023
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;
}
RE: "pre" tag not shrinking. Not showing Horizontal scroll Bar - Drbrassie4 - 07-27-2023
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.
RE: "pre" tag not shrinking. Not showing Horizontal scroll Bar - snottiest555341 - 07-27-2023
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.
RE: "pre" tag not shrinking. Not showing Horizontal scroll Bar - Mrpolarize976 - 07-27-2023
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`.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div.container {
display: flex;
flex-direction: column; /* Optional */
overflow: auto;
border: 1px solid red;
}
pre {
overflow: auto;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->