UsableTypeTypography for the World Wide Web

style guide

Whitespace

The white-space property defines how text is layed out by the browser. The default value of normal directs the browser to collapse sequences of white space such as multiple spaces in the text, and to break lines wherever is necessary to fill line boxes. This is what we are used to browsers doing.

However, if white-space is set to a value of pre then any long spaces in the code should be left intact.

p {white-space:pre;}

Here the spaces are left entirely as layed out in the code.

Unfortunately, some browsers do not implement this correctly. For example, if you are using Internet Explorer on a Windows system you may see the example above as one line of text. Check the source code to discover what IE should be showing you.

The nowrap property causes the opposite effect. Text is prevented from line wrapping unless specifically directed to with a <br /> element. This will cause the line to continue for as long as it lasts, perhaps forcing the user to horizontally scroll their browser window to read the text.

The last two values where added in CSS2.1 and allow a mix-match of the preceding values. pre-wrap allows the browser to preserve the white space between words but ensures that lines of text are wrapped normally to fill the line boxes. pre-line is the opposite of pre-wrap, causing white space between words to collapse in, but preserving any line breaks in the code.

white-space
Values: normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial Value: normal
Applies to: all elements
Inherited: yes
Percentages: N/A

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close