Text is not wrapping in my fixed width div!!
Now, this is a stupid post. And By stupid I mean that kind of thing that if you hear about it you think "Oh, it was obvious", but if it happends to you you waste a lot of time trying to fix, then you think "Oh, it was obvious. If I blog about it I will sound stupid". Well, this kind of blog posts are the most important, I think, so here it is, sounding stupid:
I had a div, absolutely positioned and of fixed width, with a long text inside that would just not wrap! That means the div would either expand its width to accomodate my text (Internet Explorer) or bleed the text out (FireFox). Was it white-space:nowrap? No! Was it that some of the table cells that contained elements had the "noWrap" attribute? No! What the hell is going on?!
Solution and explanation: wrapping occurs only on NORMAL SPACES, not  . The text inside my div didn't really have any spaces in it, it was one continuous string of words joined by the innocent .
I had a div, absolutely positioned and of fixed width, with a long text inside that would just not wrap! That means the div would either expand its width to accomodate my text (Internet Explorer) or bleed the text out (FireFox). Was it white-space:nowrap? No! Was it that some of the table cells that contained elements had the "noWrap" attribute? No! What the hell is going on?!
Solution and explanation: wrapping occurs only on NORMAL SPACES, not  . The text inside my div didn't really have any spaces in it, it was one continuous string of words joined by the innocent .
Comments
Hi, this saved me a headache! I had the same with a div that contained a list of span elements, each span containing a single word, so no spaces indeed! I expected the wrapping to occur between spans, but it doesn't! Thanks for posting this 'stupid' post! Regards, Vic
Vic MortelmansThis just totally saved me another hour of headaching, thank you. I must have cut n pasted that text in and somehow those pesky  's snuck it. Thanks again.
AnonymousAwesome!
V.Vamshi Krishna ReddyI have very little hair left after creating divs and just typing asdf over and over, thanks man, you saved what was left of my sanity :-)
TomThanks a ton...this post helped me solve a problem, I tried all CSS but was not able to get...basically you should have space between words...no continuous text.
AnonymousI am glad I could help. However, you should know Internet Explorer 8 treats *wbr* differently from other browsers. All is explained in this link http://www.highdots.com/forums/html/ie-8-refuses-honor-wbr-276549.html
SideriteBy the way, I found the solution to this problem after tons and tons of research (actually, after trying everyone's solution and finding none of them worked, I invented it myself and couldn't believe it worked!). I saw people asking the same question and people said replace it with another character code (that either collapsed, didn't wrap, or was wider than a normal space), with an image (yuck), use white-space: pre-wrap (which doesn't work in ie) etc. Finally, I happened across the handy < wbr> (with no space). The solution is simple. Instead of putting "& nbsp;" for every normal space, put "& nbsp;< wbr>" (remember to take out the spaces). Bam! Does just what we want in the major browsers! < wbr> is a little known tag that tells the browser to put a newline here only if it needs it.
Dallinhah! Thanks, yes, you're right, it's something that made me shake my head and think how dumb, but I just had this EXACT problem and this helped me tremendously! I would have messed with this forever to figure it out. Thanks!
Dallin:) Well, if you put it that way!
SideriteYou should perhaps know that the "nbsp" in &nbsp; stands for *non breaking space* :)
Daniel