The handling of white space in HTML documents has become progressively more nuanced over time, evolving from the simple pre element of pure HTML to the fifteen options available by combining two separate properties in CSS3. This page details this process of evolution.

HTML 2.0: the pre element

In November 1995 HTML gained a formal specification in the form of RFC 1866. This document codified the behaviour of the web browsers of the time and named this standardised mark-up language HTML 2.0.

HTML usually normalises white space, collapsing consecutive spaces, tabs, and new lines into a single space. However, to make formatting certain types of content easier the specification introduced the concept of preformatted text. Within a pre element white space is prevented from collapsing, and text wraps only where new lines occur in the source code.

CSS and CSS2: the white-space property

In December 1996 the Cascading Style Sheets specification introduced the white-space property, with three options for its value:

normal
causes white space to collapse and lines to be broken where necessary
pre
prevents white space from collapsing and causes lines to break only where new line characters occur in the source code
nowrap
causes white space to collapse but lines not to break except where a br element occurs

The Cascading Style Sheets Level 2 Revision 1 specification introduced two new options for the value of the white-space property:

pre-wrap
prevents white space from collapsing and causes lines to break where new line characters occur in the source code and wherever else necessary
pre-line
causes white space to collapse and lines to break where new line characters occur in the source code and wherever else necessary

These five values affect three different aspects of white space handling, as summarised in the following table:

new lines other space wrapping
normal collapsed collapsed map wrap
pre preserved preserved won’t wrap
nowrap collapsed collapsed won’t wrap
pre-wrap preserved preserved map wrap
pre-line preserved collapsed map wrap

The following table summarises support for the five values in different web browsers:

IE Firefox Chrome Safari Opera
normal 5.5 1.0 1.0 1.0 4.0
pre 5.51 1.0 1.0 1.0 4.0
nowrap 5.5 1.0 1.0 1.0 4.0
pre-wrap 8.0 3.02 1.0 3.0 8.03
pre-line 8.0 3.5 1.0 3.0 9.5
  1. In Internet Explorer the ‘pre’ value is only supported in standards mode and not in quirks mode
  2. Mozilla 1.0 and 2.0 had experiment support for ‘pre-wrap’ as ‘-moz-pre-wrap’
  3. Opera 4.0, 5.0, and 6.0 had experiment support for ‘pre-wrap’ as ‘-pre-wrap’, and Opera 7.0 had experimental support as ‘-o-pre-wrap’

CSS3: white-space-collapsing and text-wrap

The CSS Text Level 3 specification redefines the white-space property as a shorthand property for setting two new properties: white-space-collapsing, which controls the treatment of white space in the source code, and text-wrap, which determines where the browser can break lines of text. The following table summarises the correspondences between these three properties:

white-space white-space-collapsing text-wrap
normal collapse normal
pre preserve none
nowrap collapse none
pre-wrap preserve normal
pre-line preserve-breaks normal

The white-space-collapsing property has five possible values:

collapse
causes white space to collapse
preserve
prevents white space from collapsing
preserve-breaks
causes white space to collapse but preserves new lines
discard
causes all white space to be discarded
trim-inner
causes leading and trailing blank lines to be discarded

The text-wrap property has three possible values:

normal
causes lines to be broken where necessary
none
prevents lines from breaking except where forced by new line characters or br elements
avoid
prevents lines from breaking inside an element except where there are no other possible break points in the line