word-wrap: break-word

[znebojsa]

Hi. Read an article on PIE about the expanding box problem in IE. Now I made a site (fluid) which is like a basic HTML and CSS tutorial, which has many <code> tags, and some of these tags contain words which are long, for example:

<img src="http://www.google.com.au/intl/en_au/images/logo.gif">

So i was testing the site in carious resolutions, and some bits of code such as the previous are two long when i used 800 x 600.

Anyway, PIE recommened using:
overflow: hidden or word-wrap: break-word (an IE only CSS style)
Now overflow: hidden did not work in my case, but word-wrap: break word, works perfectly. So now IE will break words will firefox will let it overflow. But is there a way to make firefox break the words as well?

If not, atleast fixing IE is great, however word-wrap: break-word, does not validate CSS. Should that matter to me?

Thanks

Edit: perhaps I could give the div a min-height in ems? so that the problem never occurs in the first place? Or put a scroll bar on the code...

[znebojsa]

Acually, ive decided to get with over-flow: auto, and min-width. Its seems much better than work breaking.

:-)

[Paul O'B]

Hi,

word-wrap was proprietary IE code but is now scheduled for CSS3 so other browsers will take it up eventually. It is the only method to break unbroken text at the boundaries of an element.

You can use overflow;hidden but that results in the part of the element that is out of bounds being hidden which isn't usually a good option (especially if its an important url).

Browsers like Firefox will let the contents spill out if they are too long but won't break the layout (but the text may overlap). The problem with IE is that it will stretch the container to fit the text and throw the rest of the layout out completely. In these cases its safer to use word-wrap for IE.

You could of course use overflow:scroll (or auto) but that result in nasty scrollbars appearing which most people don't like but can be a solution.