W3C CSS alternative to word-wrap : break-word;?

Hi folks,

I’ve been developing a site that complies to W3C XHTML Transitional CSS 2 and Accessibility (Level A) standards. I have found one problem that i have not yet been able to resolve. I have a situation where long urls displayed in the front-end of the site mess up the layout of the page. I have found a Microsoft solution to this and that’s using: word-wrap : break-word; in CSS. However unfortunately this is not recognised by the W3C CSS 2 standards. Does anybody know of a W3C CSS2 alternative without scrolling?

Appreciate your suggestions.



white-space: nowrap;

Fatnewt: surely that will prevent line-breaks, while I believe novicewebdevelop is asking how to force line-breaks to prevent a layout being busted up.

Theoretically, I think the CSS2.1 white-space values “pre-wrap” and “pre-line” should do that, but Firefox and opera don’t seem to support them, so I can’t tell.

In any case, faced with content wider than a container, I believe IE will just stretch the container.

Theres some info here but no real solutions I’m afraid.


If the information being entered is dynamic then you may need to write a script to break it up to fit your layout.if its something you’ve entered yourself then you can of course break the line up manually.


(If you want to cheat and validate you can hide the break:word in conditional comments but even though I mention it I don’t see the point because its not folloing anyone except the validator :slight_smile: )