Need help getting line-break to work

In in the process of updating my website. I'm using feedburner's buzzbooste in my sidebar tabs, but no matter how hard I try, the texts do not break to the next line and actually extend beyond the boundaries established. Would anyone be able to look at my source codes and tell me how can fix it? The website is http://www.autotribute.net/

 

Try defining the width of the div the text is in. Try a container div if that doesnt work. A div is a container, if its set to a fixed size I dont think it will over flow left ot right unless you allow it to.

 

In addition to the original div container, I tried one more div container ("tab-content") and defined its width -- it still doesn't work. Any other insights?

 

It *would* have wrapped but browsers don't wrap where there is no space.

A single long word like AAAAAAaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhhhhhhhhhhhh
cannot wrap.

If you are going to have space-less text in it (like long urls) then you might want to seriously consider some sort of url shortener... something like they use here at Digital point. The url appears like
blah.com/blah...moreblah.html

Clicking on it takes people to the correct URL. This is something your back end would do, running some little script for you. If you do something like tinyURL then you're dependent on their servers. Their servers go down, so do your links.

If you can't do either, then you only have two other options.

In IE (all versions) and Safari 3+, you can use the once-IE-only but now CSS3
word-wrap: break-word;
which will break words at whatever character is at the edge of the container.

This does not work in FF or other browsers, only the ones listed above. Eventually FF and Opera etc will prolly support this but not today.

Your other option is overflow: hidden or auto. Overflow: hidden will cut the content off and it will not be accessible, but also it will not be seen coming out of the container.
Overflow: auto will make little scrollbars. Scrollbars are ugly but they allow access to all the content inside.

Other than those, that's about it.

Oh, one more possibility.

If you know you'll just have really long words in there like names or something, no spaces, you could manually insert something called a soft hyphen. Soft hyphens are not seen in word except when they are so long they need to wrap. The decimal character entity is & # 173 ; without spaces of course.

Soft Hyphen does not work in FF2 nor any of the derivatives of FF2 such as K-Meleon. It works somewhat in FF3.0 but not in tables (this was fixed in one of the versions so depends on which FF 3.0.x you have). It works everywhere in FF3.5.

Obviously this doesn't do you any good if the content is being added dynamically, but I've used soft-hyphen for this reason with menus in a sidebar where the text would get too wide if someone needed to do text-enlarge (my sites are in Dutch so you get a lot of long words : )

 

Stomme poes, forget about the "AAAhhhhhhh" statement in the FEATURED tab. I just want know how come there is overflow in the other two tabs (which contain RSS feeds using feedburner's buzzbooste), despite using the word-break property for all possible div containers? The website I'm working on is a pilot/update to an original one hosted on Blogger. I don't seem to have this overflow problem for the original (check it out here)

 

I thought this would be an easy fix, but nothing seems to work. Your help will be appreciated.

 

Well, this might be why : )

#sidebar .yui-navset {
white-space:nowrap;
}


Last time I looked at your site I hadn't turned Javascript on so didn't see any feed stuff. Nevertheless, it would also explain why word-wrap: break-word wasn't working for the AAAAHHHHHHHHH (because in IE and Safari and maybe Chrome, normally that WOULD break it).

.tab-content isn't more specific than #sidebar .yui-navset, so you're not overruling the nowrap.

Your li's, anchors, spans, everything are the correct width. So, I'm not sure what the nowrap was for but if it's leftover junk code from earlier and you're not using it, could could likely safely remove it entirely.

Otherwise, if you need it somewhere, then your .tab-contents will need to be more explicit to override (and you can just set word-wrap to "normal" instead of dealing with break-word).

 

Thank you, Stomme poes. The white-space:nowrap was the problem--I deleted it and now everything works. I just can't believe I didn't see it.