Monday, September 14, 2009

CSS Wrap a long word to fit container

Today I had to do some searching to find a solution for an internationalization problem. I had a div with a fixed width of 140px and wanted to ensure the text fit inside this div and automatically wrapped. In order to do that I had to find the right css. At first I thought using white-space: pre-wrap would work. However, the problem with that is it only wraps between spaces. So:

this is a
long area
with a
forced
wrap

would look okay. But the following would not wrap and would overflow into the other divs:

thisisalongareawithaforcedwrap

In order to fix that (I was doing it for internationalization purposes) I used this:

word-wrap: break-word;Worked like a charm!!