The white-space CSS property

The display of a webpage may be directed by whitespace and newline automatically. It should applied in a box rather than a full page and in this case, it can help solve rendering problems.

What is white space?

In the CSS grammar, it is one or a sequence of characters following (with UTF):

The codes em space (U+2003) and ideographic space (U+q3000) are not included. (Ref CSS 2.1).
Codes of line feed or carriage return have the same effect in a webpage.

And white-space is a CSS property that specifies how to handle white spaces with appropriate processing for each character.

Property white-space

The default is normal. We can assign the following values:

normal
The spaces are reduced to one.
There is a new line automatically to fit the width of the box.
pre
Does not merge spaces.
No new line automatically.
The line feed must be explicitly requested by a \A code.
The line feed is also done if given in the text with the code \D (Enter on your keyboard).
nowrap
Contiguous spaces are reduced to one.
Line feed codes are ignored.
pre-wrap
Do not merge contiguous spaces.
Newline automatically added to fit the box.
Line feed with \D or \A codes.
pre-line
Contiguous spaces are reduced to one.
Newline automatically to fit the box.
Line feed with \D or \A codes.

In a <pre> tag , the white-space property is implicitly pre.

Recapitulation

Demonstration

The following texts contains contiguous spaces and line feed imposed by inserting the \D code, without markup newline. It has also white spaces placed at the beginning and end of line.

Here is the original code : 

<p>    This demo text 
   contains spaces suites and a carriage return.     </p>

It is rendered as following depending on values of the white-space property:

pre (white-space:pre, not the tag):

This demo text contains contiguous spaces and a carriage return.

normal:

This demo text contains contiguous spaces and a carriage return.

nowrap:

This demo text contains contiguous spaces and a carriage return.

pre-wrap:

This demo text contains contiguous spaces and a carriage return.

pre-line:

This demo text contains contiguous spaces and a carriage return.

The demos use the following code, with different values for the white-space property:

<p style="white-space:normal;border:1px solid black;width:320px">    This demo text 
     contains contiguous spaces  and a carriage return.     </p>

How to insert tabs in a HTML page

How to insert tabs in a web page? This is done with the property white-space:pre, that can be applied to any tag.

The TAB key on the keyboard inserts a \T code in the page content, but by default it is converted into space and contiguous spaces are reduced to one.
To keep this code correctly displayed by browsers, change the mode of spaces processing, which is made with white-space.

For this to better work, an advice: positioning data with a single character at first, for example:

x x x

Then replace the character by the right ones, and if needed remove excess tabs.

white-space:normal (default)

This text contains tabs:
one one2 one3 two two two three three2 three3 four four2 four3

white-space:pre

This text contains tabs: one one2 one3 two two2 two3 three three2 three3 four four2 four3

Code source:

<div class="wspre">
This text contains tabs:
   one    one2     one3
   two    two2     two3
   three  three2   three3
   four   four2    four3
</div>

References

© 2010-2022 Xul.fr