Notes on wrapping content of HTML pre tag, and on finding out which HTML elements cause horizontal scrolling (scroll issue)

Last updated on 22 Apr. 2024

Quick-Info: CSS solution for wrapping content of HTML pre tag:

      pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

Recently when I was using my VBA code to create a blog book of one of my WordPress blogs - https://ravisiyer.wordpress.com/ - I faced a horizontal scrollbar appearing in output HTML blog book problem. As the HTML file was a long one, when I tried to spot the lines that are overflowing by vertically scrolling through the HTML page rendered in Chrome browser, I was not able to spot them. Though I did think that at times while scrolling fast through the long page/document, I passed some horizontal overflow text but trying to zero in on it had not worked.

How to find the cause of horizontal scrollbars, https://polypane.app/blog/strategies-for-dealing-with-horizontal-overflows/ helped me to locate the cause of the horizontal scrollbars by using "* {outline: 1px solid red;}" style specification. It was  some cases of pre tags used by WordPress for code blocks in my posts where the pre tag text overflowed horizontally. The red outline helped me catch these overflowing text and zero in on them. [The above article also has interesting info. about deleting HTML elements in browser DevTools till scrollbar disappears and then drilling down into the particular element that causes the scrollbar and find out which child element in it causes the scrollbar.]

One of these cases can be located in this blog post section:  https://ravisiyer.wordpress.com/2023/10/17/learning-web-app-development-log/#reactjs by searching for "On running npm start I got the following errors:". As of now, there is only occurrence of it in the page. But just in case ..., it is followed by the line "Failed to compile." which is the initial part of a slightly long WordPress "Code" block. This Code block contains some long lines which were the cause of the horizontal scrollbar appearing problem in the generated HTML blog book.

Next point was how to fix it. I tried       

pre {
        width: 100%;
        max-width: 100%;
}

but it did not work.

A decent mid-way fix is to have overflow-x: auto as the style for (all) pre tags:

pre {
overflow-x: auto;
}

This causes a horizontal scrollbar to appear only for the pre tag elements and the window does not have a horizontal scrollbar. So HTML viewing is fine. But print may be an issue as the overflow will probably get snipped. 

But how does Wordpress show the post without horizontal scrollbar? I tried to check that out using DevTools but it was hard to figure out due to large number of CSS statements applying to such pre elements.

From: How to wrap a text in a <pre> tag using CSS ?, https://www.geeksforgeeks.org/how-to-wrap-a-text-in-a-pre-tag-using-css/ , I got the solution of using:

      pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

That fixes the issue by wrapping the pre tag long text into multiple lines on the display! I think the key property is "white-space: pre-wrap;"

pre-tag-width.html file demonstrates the solution. Its HTML code:  https://gist.github.com/ravisiyer/0c016a02c36ea627920f4c677a7f2dab