The CSS white-space Property Explained
By Louis Lazaris on June 8th, 2010
Categories: Markup & Style, Web Design Articles | 67 Comments
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 <pre> tag.
(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.
The 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:
Value: normal
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.
Value: nowrap
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.
Value: pre
The value 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.
Value: pre-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.
Value: pre-wrap
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.
Misconceptions
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-line and 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.
67 Responses
Add to the Discussion
Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. Thank you for cooperating.
To Post Code Snippets in Comments: Wrap your code in <code> tags, and make sure you use < and > for HTML, instead of < and >, otherwise your code will not show up properly.
To the point article.
Thanks man.
Awesome article, I have to admit I haven’t payed this property much attention (didn’t bother to see any real use), until now. Thank you.
Thank you a lot.
It was very useful for me…
Interesting article! Even though I’ve never used this property, it can come handy when dealing with multiple divs where I need to avoid wraps.
Just remember that it won’t work on elements that are still “block-level”. The elements have to be “inline” or “inline-block”.
Do you mean that if I have two parallels divs using the property “float:left” I can’t use the property “white-space” to avoid wrapping?
No you can’t.
This is meant to wrap things like text (inline elements)
Your best bet if you are using a fixed width layout is to define the widths of the divs too so that they fit in like a puzzle!
thanks for the explanation – the examples made it crystal clear!
Thanks! I’ve never paid much attention to this property either . . . going to try this on some of my current sites.
Great read, Louis. white-space is quite handy when styling code samples (if you don’t use code formatters, and personally I don’t like them.)
crazy, I feel I am fairly well versed in CSS, didn’t even know about this property, will be using, thanks!
Great article! Thought I’m using this property for a while, I’ve never heard before of the two last values.
There’s also this usefull hack using the white-space property, to center multiple divs in a single line: http://www.impressivewebs.com/center-multiple-divs
Great application for this property. Thanks for the tip!
Thanks for detailed insight! :)
Nice article, education on all fronts. Well presented too. Thanks IW
Clear explanation, nice article!
Thanks man!
Very useful indeed.
Thanks for the useful tips. I will start using it from my next project
Very nice and helpful article, long live white-space!
Nice article!
Wish i’ve read this before.
Indeed this was very useful. I also like very much the simple design of your blog. Great work.
Well, I’ve been using this simple layout for most posts now, and it seems to have gone over very well.
The rest of the site still has the old layout, but I think I’m going to do everything in this style from now on. Thanks.
Eye-opener!!
This solves a common problem I encounter with some headlines that have an awkward text flow or widow. I always feel weird about adding a .
Thanks!!
Nice article :)
Great read, I do forget to use this tag sometimes ;)
Very focused article, very well written.
Whitespace, MySpace, Office Space. This topic is over “explained”…
Hard to draw that conclusion based on the comments.
Nice article,
I prefer to use pre vs. code tag for code samples.
The tag you used in this article for white-spacing is new for me and i learn from it.
Great article. I haven’t bothered to know what white-space is, or its use, until now. This article is an eye opener for wannabe designers like me. Also I love your blog. Beautifully Simple. A ton of thanks.
There are two errors in the pre-wrap image: the look like of the example must have “spaces and a line break” on a new line, and the explanation (“explicit line breaks are ignored”) is wrong, while the one above (“it will honor multiple spaces and explicit line breaks”) is correct.
Great eye! Thanks for pointing that out, I’ve corrected it. It’s amazing how many times you can review something, but still make a mistake like that. Shows the importance of getting a neutral eye on things.
Those last two properties were actually new to me too when I did the research, so I think I was still slightly confused. Although I did have the text explanation correct outside of the graphic, so who knows.
It should all be correct now, thank you.
Now the word “spaces” must be on the second line ;)
I think the example would be better to understand showing a natural line break too, perhaps you could present the same sentence with two different font-size.
*facepalm*
Thanks, man, I’ll have to fix it later because I have no access right now.
Fixed. And yes, you’re right, showing the natural line break would be better. But I think the text explanation is enough, especially considering that property will probably rarely be used.
Thanks again for spotting those errors.
This is a great article. Using CSS for the past 4/5 years i have to admit i have never used the white-space property. Now that i know what it is and how to use it, i think it will be very useful for me.
Thanks for sharing.
Very helpful article.
Thanks for providing useful information.Very well xplained.
thanks
i got to this site via smashing mag.
I’m a css geek (or so i think) and never had to use the white-space property.
very nice! I can’t wait until CSS3 is supported everywhere…
Nice Article. Really didnt think white spaces can get really this important.
Congratulation, very useful article!
I guess ya learn something new every day. The pre-wrap setting looks great for replacing nbsp.
I’m sure this would have helped in previous sites I have worked on. I’ll certainly think about the usage of CSS element white-space in the future! Thanks for the informative post! ;)
Thanks for this valuable illustrated article.
Hello,
Thank you for the article, it is well written and easy to understand.
I’ve only been using CSS for about a year and a half, so maybe this is a silly question, but in some cases couldn’t you just use a break tag, or is that less efficient?
Yes, you would, but the
white-spaceproperty is good for when you don’t want a break to occur within a certain portion of text (using “nowrap” as the value), but you don’t want it to occur before that section of text.See the example in the article from Zabox. In that case, if the paragraph is shorter, the link will stay on the same line as the last line of the paragraph, whereas if the pargagraph is too long (as is the case in the example), then the entire link will drop to the next line and won’t break in an awkward spot.
If you use the break tag, then you’re forcing the break when you may not need it at all. This, of course, would only apply to dynamically-generated content where you don’t know if the paragraph is long or short.
This is great! Been looking for a method for stopping links in a horizontal menu to break-up a while back. Found this post through SmashingMagazine, so now I know :) Thank you very much!
Sander
Nice article about white space.
Lessons learned.
Nice article. Definitely sending noobs here, because it can be an exceptionally useful tool in defining layouts.
really gr8 lesson to learn.. thanks buddy..
i will now start using this tag also.. :)
Excelente article. Thanks for sharing.
nice! i love learning new things like that!
Most of us don’t pay enough attention to such details, even if those small details make our design stand out!
I think there is still an argument for using tags (to cater for users without CSS and in RSS feeds). Also, I’ve used the link technique you mention on my own site – and its a life saver!
Great stuff
I stumbled upon this article by accident and it just happened to solve a issue I’ve been trying to fix.
Thanks!
Thanks! This will save
so much time!
We want to break words in a table cell into lines. “white-space:pre-line” did trick for us. Unfortunately, ONLY IE 8 supports “pre-line”. I already checked “word-wrap: break-word;” but this does not seems to be working. Even my editor doesn’t recognize “word-wrap: break-word;” as a valid CSS. Any help on how to accomplish this.
Regards,
Great read! will be keeping this in mind for the future.
I had that very same issue happen to me just yesterday on a “Read More >” link for a WordPress blog….length of the excerpt was pushing the arrow to the next line.
How lucky I am to stumble upon this article the very next day! Gone back and fixed now.
Cheers!
Great post.
I usually use this property to simulate min-width for buttons (A tags) in IE 6: http://uninstallme.com/enlaces-con-un-ancho-minimo-en-internet-explorer-6/ (in spanish).
It’s also usefull to simulate the nowrap attribute for table cells aplying it to a SPAN element:
<td><span class="nowrap">bla bla bla</span></td>
Excellent Article, Keep posting like this
Very nice explanation man.. Do Not know ’bout this ’till now.. and to think that I was thinking I now to much already,…
silly me LOL
thanks to U Now I know that I Do know just a little.. maybe not a thing hahaha
best regards.
Fantastic article and something I’ve known for a while but not really used, i will look to use it now! thanks
Good and informative. Thanks!
Great help! i used this tag when i was working on page http://www.txtimpact.com/shared-shortcode.asp . you can view these features easily. thanks again.
You gave nice ideas here. I done a research on the issue and learnt most peoples will agree with your blog.Thanks a lot for enjoying this beauty article with me. I am appreciating it very much! Looking forward to another great article. Good luck to the author! all the best!