You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Aug 25

CSS: the white-space property

2005 at 02.14 am posted by Veerle Pieters

“White space” is a property I have never used before…

white space:nowrapWhite-space controls how white space and cariage returns/linefeeds should be handled in a document. "Normal" is the inherent value for most HTML elements, with the exceptions having their own tags to create special behavior. This is a very powerful property and should be used with caution. For Mac users an excellent tool that should have a place on your Dashboard is SeeSS, the tool where I got this knowledge ;-)

Just recently while working on a flexible tabbed navigation, using Doug's superb Sliding Doors technique I ran into some problems in Internet Explorer. Whenever I.E. encounters a space between words, it interpretes it as a cariage return and the The word after the space jumps onto another line, because like Cody mentions in my comments: "I.E. is trying to wrap the text since you specified a .1em width on links. Other browsers are not paying any attention to that width because it is specified as #mainnav a instead of #mainnav ul li a." I needed a .1em width to fix I.E.'s white space bug so that's actually the main reason why the text jumps to another line. Boy, it's getting complicated isn't it? :-)

  1. #mainnav li {
  2. float: left;
  3. background: url(../images/mainnav-left.gif) no-repeat left top;
  4. margin: 0 3px 0 0;
  5. padding: 0 0 0 9px;
  6. white-space: nowrap;
  7. }

Using 'white-space: nowrap' did the trick. To save anyone from having the same hassle, don't forget by using 'white-space: nowrap' in the 'li' element your problem will be solved. I haven't used this anywhere else yet, but I can imagine that this could be used in other situations too.

UPDATE: Since Adrew could confuse some people with his comment I did a test as suggested by David.


40served

gravatar

1

permalink this comment dotK Thu Aug 25, 2005 at 02.52 am

Great tip

If invented almost 10 workarounds for this problem. Never guessed it was this easy.


gravatar

2

permalink this comment Jérôme V. Thu Aug 25, 2005 at 03.05 am

Funnily, I looked at the same property yesterday with SeeSS :]


gravatar

3

permalink this comment Michel Vuijlsteke Thu Aug 25, 2005 at 04.51 am

And for backwards compatibility: <nobr> :)


gravatar

4

permalink this comment tom Thu Aug 25, 2005 at 05.12 am

is it save to use <nobr> ?


gravatar

5

permalink this comment Marten Veldthuis Thu Aug 25, 2005 at 05.38 am

In that image of yours there’s more padding on the right than on the left, but only for the tab that used to wrap, in the no-wrap state. Is that a side-effect or some other bug you still had in your css?


gravatar

6

permalink this comment Veerle Thu Aug 25, 2005 at 05.59 am

@Tom and Michel, I’m not sure about the <nobr>, I wouldn’t use it in an XHTML document (I don’t see it listed at W3C). My solution works for I.E. 5.x and 6.

Marten, I’ve simulated the error in Photoshop. I don’t have the proper source files of this navigation anymore, it has been changed a bit in CSS code etc. so I had to improvise a bit :-) I didn’t notice the extra pixel-gab until you mention it. Gosh, I’m always too much in a hurry, too busy, too little time hehe :-)


gravatar

7

permalink this comment Matthew Turner Thu Aug 25, 2005 at 06.20 am

When I looked at that article and implemented it I hit the same problem. I didn’t even stop to think before using a non breaking space!

Good tip.


gravatar

8

permalink this comment Andrew Thu Aug 25, 2005 at 06.26 am

” Whenever I.E. encounters a space between words, it interpretes it as a cariage return and the word after the space jumps onto another line.”

That was the behavior you *saw*, but that’s certainly not what is happening. Browers will never “interpret” one entity—a space—for another—a return.

What you are seeing is plain old text wrapping, just as if you’d increased your font size or narrowed the browser window. There ain’t enough horizontal space where you need it, so the browser wrapped the text, that’s it.


gravatar

9

permalink this comment Veerle Thu Aug 25, 2005 at 06.38 am

Andrew, then how do you explain the fact that as soon as I added ‘white-space: nowrap’  the problem dissapeared? I didn’t change width or whatever. The <li> doesn’t have a width, it is flexible and takes the width of the text in the button (see the article about Sliding Doors at A List Apart). Also I don’t have this issue in Mozilla browsers (Safari, Firefox…) only Internet Explorer has this behavior. And no, there is enough space left, I.E. just ignores it. I have 3 buttons consisting of 2 words in my navigation, and all these buttons had the same issue. As soon as I added the ‘nowrap’ everything looked fine.


gravatar

10

permalink this comment David Thu Aug 25, 2005 at 07.30 am

There’s a simple test for this—you could put single characters as your “words” (e.g. “A B”)  If you’re correct, it should place “A” and “B” on separate lines.  If Andrew’s correct, they should remain on the same line.


gravatar

11

permalink this comment William Stewart Thu Aug 25, 2005 at 07.46 am

*slaps head*  I forgot about that!  Thanks for the reminder.


gravatar

12

permalink this comment Veerle Thu Aug 25, 2005 at 08.21 am

@David: good idea :-) So here is the test.


gravatar

13

permalink this comment Chris K Thu Aug 25, 2005 at 08.29 am

Hi,

Great tip, also include email cloaker in your widget collection.


gravatar

14

permalink this comment Kim Siever Thu Aug 25, 2005 at 09.00 am

“how do you explain the fact that as soon as I added ‘white-space: nowrap’ the problem dissapeared?”

Because spaces are considered whitespace.


gravatar

15

permalink this comment Dustin Thu Aug 25, 2005 at 09.12 am

“...so ignore Andrews comment please.”

lol. That’s funny, Veerle. Nice test. 

BTW, I love the short little post. It reminds me a lot of the posts on YourTotalSite. Quick and easy to read, but also relevent and usable.


gravatar

16

permalink this comment Timmargh Thu Aug 25, 2005 at 09.15 am

Aha! Saves me having to replace my spaces between words with & n b s p ; all over the place.


gravatar

17

permalink this comment Timo Thu Aug 25, 2005 at 10.19 am

Thanks Veerle this is a great tip!


gravatar

18

permalink this comment Mark C. Thu Aug 25, 2005 at 01.12 pm

Dit is een goede tip Veerle, maar ik heb zo mijn bedenkingen.
Moeten we , nu IE7 in aantocht is, ons nog steeds bezighouden met ouderwetse niet volgens de regels werkende browsers ?
Er zijn hacks voor IE5, nu komen de IE6 hacks aan de beurt lijkt mij zo de doelstelling.
Komt er dan nooit een einde aan al die tricks om “foute” browsers te ondersteunen ?
Maar zoals ik reeds zei, het is een nuttige goede tip.


gravatar

19

permalink this comment Cody Thu Aug 25, 2005 at 01.25 pm

IE is not interpreting your white space characters as a carriage return, it is simply trying to wrap because you specified a .1em width on links. Other browsers are not paying any attention to that width because it is specified as #mainnav a instead of #mainnav ul li a or else they would show the same behavior as IE does.

I understand why you need to specify a small width on the links, to make up for another bug in IE, but the wrapping behavior is simply because IE thinks the links should be .1 em wide and therefore its wrapping behavior is correct (assuming the link should have that width). Anyway, white-space: nowrap is a good thing in this case, but IE is not interpreting whitespace characters as carriage returns that is for sure.


gravatar

20

permalink this comment Joshua Thu Aug 25, 2005 at 01.27 pm

I think what’s going on here has to do with BLOCK vs. INLINE elements.

Your CSS rules have   #mainnav a   set to display:block and width:.1em.

The combo of those two are what cause the links to extend vertically (for kicks, just remove the width:.1em rule and see that each link extends horizontally the full width of the page… because they are BLOCK elements)

Try changing from display:block to display:inline and see what happens too =)


gravatar

21

permalink this comment daniel Thu Aug 25, 2005 at 01.39 pm

Thanks for that great tip! This will save me a lot of time next time I’ll have that problem.


gravatar

22

permalink this comment Cody Thu Aug 25, 2005 at 01.46 pm

Joshua, although #mainnav a is set to block, more importantly it is set to float, which means it shouldn’t stretch to 100% any longer. It’s a bug in IE, which is why the .1em width is there in the first place I imagine.


gravatar

23

permalink this comment Joshua Thu Aug 25, 2005 at 01.54 pm

Crazy CSS!!

Thanks Cody =)


gravatar

24

permalink this comment Zach Thu Aug 25, 2005 at 10.07 pm

Very nice. I think there was something briefly mentioned at @media(could be wrong) about whitespace that I wrote down but forgot to remember.


gravatar

25

permalink this comment Awarnach Fri Aug 26, 2005 at 01.01 am

Nice Tut!
I use PC instead of Mac, so I always go to http://www.w3schools.com/css/ to view all the posibilities and variables.


gravatar

26

permalink this comment Veerle Fri Aug 26, 2005 at 01.08 am

@Cody, you are right, this makes sense. I totally overlooked the fact that I use a .1em width to fix the white space bug in I.E. within my main CSS file. In the complex layout where I use this navigation, I implemented a bunch of other hacks and I totally forgot about this one. I didn’t see the wood for the trees anymore :-D Thanks for clarifying the mystery! What a crazy CSS world we live in! ;-)  My brain must have been in a “bug-overload” :-)


gravatar

27

permalink this comment Dustin Fri Aug 26, 2005 at 08.31 am

So what’s the conclusion to all of this? Maybe you could add another update. It would be a great resource.


gravatar

28

permalink this comment diego nunes Tue Aug 30, 2005 at 06.27 am

. . It always seemed so obvious to me. If you specify a block with a very small width —smaller than the content—, the words will just break. If you don’t want it, you should put “ ”, or just “make-up” your simple spaces as non-breaking ones, using “nowrap” value for “white-space” property.
. . Anyway, it’s a pitty I came here so late. I would be able to help, if I came at the beggining of this all =/ But now it’s solved, and we’re all happy, huh?
. . So, the conclusion is: IE wasn’t wrong (this time).

  Amplexos.


gravatar

29

permalink this comment jan Tue Aug 30, 2005 at 10.09 am

Wow thanks for the tip! Always used the   thingy :)


gravatar

30

permalink this comment Faruk Ateş Wed Sep 7, 2005 at 05.41 am

It’s a property that is often forgotten, but highly useful!

Good post, Veerle. Reminded me of its existance again ;)


gravatar

31

permalink this comment Erwin Heiser Wed Sep 21, 2005 at 05.16 am

Veerle, just how exactly do you check your designs in IE5?
I have a Win XP box (with IE6) to check my layouts but no IE5.
Care to explain?


gravatar

32

permalink this comment diego nunes Wed Sep 21, 2005 at 06.35 am

  Erwin Heiser: You can install “StandAlone versions” of IE. You can find them to download in some sites, like <http://www.quirksmode.org/browsers/multipleie.html>  ou <http://www.positioniseverything.net/articles/multiIE.html>. On this last one (Position Everything site), you’ll find some useful information about CC’s (Conditional Comments)—and, be aware of that CC’s don’t work properly on StandAlone IE’s.

  Amplexos.
—diego nunes


gravatar

33

permalink this comment Veerle Thu Sep 22, 2005 at 10.58 am

@Diego: Thanks for handeling this for me :-p

@Erwin: I use this technique too but you have to be careful that you are in the correct version :-) Use the about IE to check.


gravatar

34

permalink this comment Erwin Heiser Thu Sep 22, 2005 at 11.19 am

I downloaded them but I cannot for the life of me get it to work :(
Any tips would be welcome, I’m on WinXP Home.


gravatar

35

permalink this comment Veerle Mon Sep 26, 2005 at 08.14 am

@Erwin: I’ve used this site for installing my multiple versions of iE. I’ve got them running on a version Windows XP professional on virtual PC. Use the instructions carefully and it should work.


gravatar

36

permalink this comment Darryl Butler Wed Oct 5, 2005 at 08.52 pm

Veerle, thanks for another excellent tute and topic for discussion.

You suggested this proprty may be used in other creative ways, has anyone got any advice for preventing entire navigation tabs from wrapping? That is, not only the words containing whitespaces, but the entire tab? The aim would be to still have the tabs on the one horizontal plane, even when the browser resizes smaller than the navigation width.

For example, I want to avoid the effect that occurs in Veerles test, where the orange tabs ‘wrap’.

I can achieve this by setting a fixed width on the outer div or the overall ul, but I’d like to find a solution which does not use a fixed width.

I’ve tried putting the white-space:nowrap rule in all manner of places in the CSS to no success.

Anyone with ideas much appreciated…


gravatar

37

permalink this comment diego nunes Thu Oct 6, 2005 at 06.35 am

. @Darryl Butler: I cannot realize a way of achieving that without at least a min-width, but it would step into your shoes when you try to add more itens, or even change the width of the existent one.
. Using the proprietary propoerty “expression”, it would be easy, but would work only in IE—so, it’s not an option…
. Sorry if I can’t help more than this. If someone knows a solution for this, please share it :)

. . Amplexos.

diego nunes


gravatar

38

permalink this comment Darryl Butler Thu Oct 6, 2005 at 06.45 am

Apmlexos
Thanks for your consideration of the problem, and you have pre-empted some of the associated issues, cross-browser compatibility and user input.
The solution I seek is going into a CMS, where the amount of links will grow and shrink as the author changes.
I appreciate your feedback, I just love that we can share ideas.
Much appreciated, keep ‘em comin’...


gravatar

39

permalink this comment Chris Fri Mar 10, 2006 at 09.04 pm

Thanks for the tip!!


gravatar

40

permalink this comment Johan Thu Jun 15, 2006 at 01.57 pm

Have for long wondered what this option “White space” really are. Now I know. Thank you for the tip!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist