CSS has a pretty useful property called
white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS
white-space property, and how each one can be used. I’ll do my best to avoid overly-technical jargon, but with this property, it’s not easy to explain without sounding overly-complex.
Some HTML Background
In (X)HTML, anytime you string together a bunch of spaces in your code, the actual page output in your browser will, by default, trim (or collapse) all those spaces down to a single space. This comes in handy, because it allows us to correctly indent and seperate the elements in our (X)HTML so it will be readable and maintainable — without creating extra unwanted space and line breaks in the browser output.
If you want to allow all space and line breaks to occur naturally, then you can use the big ugly cousin of the
white-space property — the
<pre> tag. All non-tag content inside of the
<pre> tag will output virtually identically to what you have in the code. It will even cause a single line to push the boundaries of its parent if no explicit line breaks are used in the markup. So, while the default in HTML is to ignore multiple spaces and line breaks, you can override this using the
(X)HTML also allows the use of the non-breaking space (
). If you want to string together multiple spaces that you don’t want to collapse, you can use the non-breaking space. The older method of doing this involves using the
<nobr> tag, but that tag is now deprecated, so it should not be used.
white-space property is the cleaner CSS answer to the aforementioned (X)HTML methods of controlling white space.
Definition and Possible Values
Through a number of possible values, the
white-space property gives us, via CSS, a way of defining how the browser handles multiple white space characters and line breaks. Of course, the portion of the document that you can target is limited to whatever can be targeted via CSS selectors.
Here are the different values for the
white-space property, along with a visual demonstration of how each one works:
This is the default value. If it is set explicitly, it will have the same result as what naturally occurs in the output with no
<pre> tags. As is the case with many CSS properties, the only time you would ever use the
normal value is if you had already set one of the other values, and want to revert to the value “normal” for that element, or for a child element that inherits the unwanted value.
This is the most commonly-used value for the
white-space property, because it does exactly what the value
normal does, except that it will not honor line breaks, and even natural line breaks that occur because of space limitations will also be suppressed.
An element that has its
white-space property set to
nowrap will not allow text or other inline elements to break naturally to the next line, but instead will push the boundaries of its parent until the line is completed, putting everything on a single line. This value will not affect strings of spaces between characters or inline elements, so multiple spaces will be collapsed to a single space, as usual.
pre works exactly as you would expect: The same as content wrapped inside
<pre> tags. All spaces and line breaks are honored, creating output in the browser that is virtually identical to what is in the markup. Also, just like the
<pre> tag, if everything in the markup is on a single line, the line will push the boundaries of its parent to keep everything in the output on a single line.
This value will work exactly the same way as the default (
normal), except for one thing: Line breaks in the HTML will be honored. So, if you have multiple spaces between elements, those will be ignored as usual, but if in your markup you drop to a new line, the new line will also occur in the output. This value is not supported by Internet Explorer up to version 7, Firefox up to version 3.0, and Opera up to version 9.2.
This value is exactly the same as
pre, except that it will naturally wrap lines according to the boundaries of its parent. So it will not force everything on a single line to imitate what’s in the markup, but it will honor multiple spaces and explicit line breaks. This value is not supported by Internet Explorer up to version 7, and Firefox up to version 3.0.
A Few Common Uses
Probably the most common reason to use the
white-space property is when applying it to a link that you don’t want to drop to the next line. Look at the screen capture below from the zaBox “confirm details” page:
The “read more” link has the
» (») character next to it, but because there wasn’t enough room, it dropped to the next line. This would have been avoided if the link had its
white-space property set to
nowrap. The link would then naturally fall to the next line as a single unit, and wouldn’t be broken up. This point helps emphasize the fact that the
white-space property only affects the content inside the element to which it’s applied. So, while the link itself will drop to the next line, the text inside the link will not be separated via line breaks.
Another use for this property is when you want to prevent a row of inline boxes from wrapping to the next line. I mentioned this in a previous article discussing how to center multiple block-level elements on a single line.
One possible problem for beginners using this property (as I already alluded to above) is that they assume that setting
whitespace: nowrap on an element will prevent that element from dropping to the next line if it is part of a group of floated boxes. The
white-space property, however, will only apply to the inline elements inside of the element its applied to, and will not affect block elements or the spacing of the element itself.
As mentioned, you’ll most often use this property when you set it to the value
nowrap, since that particular value has some practical use. Since the values
pre-wrap don’t work with Internet Explorer, they will not likely be used very often, but they do seem to offer practical value if they become more widely supported.
Please offer comments on other possible uses, or on problems that can occur with the
white-space property. I’m sure it has numerous practical benefits and potential drawbacks that I haven’t mentioned here.