CSS2 provides 4 possible values for the attribute “white-space”. They are: “inherit”, “normal”, “pre”, “nowrap”. The attribute “white-space” is used for the paragraph tag <p> to specify how white spaces or line returns are treated.
Here are examples of each. (View Source to see the code)
With “white-space:normal”, the browser consolidate sequences of white spaces into a single one, and any white space location can be used to wrap the line for display. This is the normal behavior of the paragraph tag: <p>. Note that white spaces are any of space, tab, and End-of-line characters. (and possibly including several others white space characters in unicode) Of course, the <br> tag can still be used to force a line break in display.
With “white-space:pre”, the browser is prevented from consolidating white spaces or wrapping the lines for display. White spaces are shown as they are, and any end-of-line characters will start a new line of display. This is the standard behavior of the <pre> tag. This is often used for showing computer program code. Try resize your window and see that the previous paragraph re-wraps, but this one doesn't. (Note: Internet Explorer 6.0 does not support this.)
With “white-space:nowrap”, the browser do not do any line wrappings.
It does not wrap the line if there is a line-return.
Nor does it wrap the line when the line reaches the window edge.
The only way to line-wrap would be using the <br>.
White spaces are still consolidated.
White Space means a space character or return or linefeed or End of Line characters. For more technical details about exactly what these are, see: End-of-line↗, ASCII↗, Whitespace↗
Sometimes you want your text to flow into multiple columns, as in newspaper's layout. However, as of 2005-12 this is not yet possible. One can make-do by hard-coding it into HTML TABLE using multiple columns. It is a pain because when you change the length of your text, you have to manually justify each and every columns by trial-n-error.
A proposed solution is in CSS3 “Multi-column layout”, drafted in 2001 but not yet in any mainstream browsers as of 2005-12. See http://www.w3.org/TR/css3-multicol/
See also: Column (typography)↗.
Page created: 2005-11. © 2005 by Xah Lee.