white-space:pre-wrap vs. overflow:auto for `pre`

[thierryk]

The rule for pre is as follow:

/* @docs
label: Pre Wrapping
note: |
  Overflow by default is bad...
category: typography
*/
pre { white-space: pre-wrap; }

I agree that "overflow by default is bad", but I'd argue that a better "fix" would be to prevent overflowing from happening rather than going against what this element is about:

The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written.

As far as I can tell, pres we find in the wild are styled with overflow:auto as it prevents content from overflowing while preserving the formatting of that content. The example below shows that this is true for GitHub too:

---------------- A ---------------- B ---------------- C ---------------- D ---------------- E ---------------- F ---------------- G
                 ^                  ^                  ^                  ^                  ^                  ^                  ^ 

So I'd suggest replacing white-space:pre-wrap with overflow:auto as it is more in line with how pre is styled IRL.

[jhthorsen]

How about overflow-x: auto;?

[thierryk]

@jhthorsen what would be the advantage of using overflow-x:auto instead of overflow:auto?