Word Wrapping with CSS

how to create a css word wrap

[beaudeal]

I've spent countless hours creating my most recent web layout. I thought it was perfect, until I was doing some testing and realized that when users can enter whatever they want, there is nothing stopping them from entering a ridiculously long word that has no breakpoints and increases my div / table cell to accomodate the length. This clearly messes up the layout bigtime. Now I guess I could solve this problem by limiting what people can enter, but I don't want to -- if they feel some desire to enter a ridiculously long word with no break points, thats fine. I also don't want to use scroll bars or hide the overflow. I just want to break words and make everything fit -- extending downward is perfectly acceptable. But I cannot find a cross-brower word wrapping solution using CSS and HTML. I am aware the there is an IE extension that exists (word-wrap: break-word) and that there is a tag called <wbr>, but I cannot find any definitive way to break words across all browsers when they get too long for my div / table cell and keep my layout in tact. Please help me!

[Wlauzon]

I am no CSS expert, but I think you want to use the overflow:hidden.

[beaudeal]

overflow: hidden will simply hide the text that is too long for the element. i want this text to be broken and visible. thanks though!

[victoriaclare]

I don't think it is possible to break words consistently across all browsers.

If you are concerned about user input, could you perhaps process the content of that field it is entered with php or whatever you are using to process the input form, and break the word at that point instead?

[beaudeal]

yea i think that is what i'll resort to at this point...

[swa66]

Too long content can be a pain to deal with in CSS, esp. when visitors force larger fonts in their browser than the one you use, you often don't see the problem, and worse you have little way of knowing what font they force as it happens client side.

Basically you don't have that control. The best way to deal with it that I know is to base all you measures off of the font size used by the browser (but it'll still not get foolproof)

Visually challenged people tend to force larger fonts a lot, as do people using high resolution screens.