CSS “pre” Problem: No Linebreak After Tag

By Xah Lee. Date: . Last updated: .

This page shows a odd CSS behavior of lines inside “pre” are being rendered without linebreaks. It has to do with with CSS display:table.

Here is the HTML source code:

<pre style="display:table; border:solid thin">
<span style="color:red">line 1</span>
<span style="color:blue">line 2</span>
line 3
</pre>

Here is what Safari shows:

Safari CSS pre display table line break
Screenshot of Safari (5.0.4 (7533.20.27)) on Windows.

The following browsers render the first 2 lines into a single line.

The following browsers renders each line separate.

What Does Your Browser Show?

Here is test pages to see what your browser shows.

What Does the Spec Say?

According to HTML 4 Specification , quote:

SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

w3 html 4b.3.3 linebreaks 2022-04-25
http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks

This may explain this behavior. However, this is indeed a very odd spec. How is one suppose to break the lines inside “pre” in the above situation? Adding “br” is illegal, and adding another line break doesn't help.

If you remove the display:table, then all browsers renders the “pre” as expected.

For another example, see: WebKit Bug: {pre, display:table}, Space Characters Not Rendered .

BUY ΣJS JavaScript in Depth