While doing some maintenance work on my web site, I noticed that the text of long lines inside the pre HTML tags wrapped. I’m quite certain this kind of text wrapping did not occur in the past. After experimenting with the developer tools of Firefox for a while, I noticed that the white-space property of the pre element was set to pre-wrap. Unchecking the relevant CSS rule in the developer tools made long lines appear correctly again and a horizontal scroll bar to appear as expected in the pre box.

Searching through the stylesheets of my theme, I found the following relevant rule in css/normalize.css:

pre {
    white-space: pre-wrap;
}

According to the relevant white-space property page at W3Schools, the pre-wrap value results in the following:

pre-wrap – Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.

The pre value results in the following, which seems to be exactly what I need:

pre – Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.

I don’t see any point in having text wrap inside the pre element. After adding the following CSS rule in my customized theme’s style.css file, the issue has been fixed.

pre {
    white-space: pre;
}

From what I see, the CSS rule in question no longer exists in the most recent version of the upstream file, so this is a good reminder that at some point I’ll need to make my theme up to date with upstream, but for now the workaround above will do the trick.

Prevent text wrapping inside the pre HTML tag by George Notaras is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Copyright © 2016 - Some Rights Reserved