The long long word conundrum

One of our recent projects posed us with a challenging and surprisingly elusive problem: how to break long words that do not really fit in the space allotted to them within the layout of a web page.

In our case, we allowed users to supply text that was 30 characters long which worked fine as long as the user put multiple words inside that string. What caused the problem was that if the user put 30 characters without a space right next to each other, it would often times make the layout break (as happened in Internet Explorer) or just look ugly with an overflow (Firefox). That’s why you pay the QA folks the big bucks.

The preliminary solution implemented was twofold:

1. For Internet Explorer use the proprietary CSS

word-wrap: break-word;

which makes Internet Explorer do just that, break words if there is no room to show them in the space allotted.

2. For every other browser, use the CSS

overflow: hidden;

to hide the stuff that cannot be shown. This is sub-optimal but the layout stays in tact.

Today I stumble across a posting in on del.icio.us that mentions something called the soft-hyphen, which is supported in the upcoming release of Firefox 3. Digging deeper brought me to this page on the always helpful but sort-of behind the time QuirksMode page.

Mentioned are three methods of helping the browser perform the ever so elusive long word wrap:

• Use an arcane tag (and we all love the arcane tags)
• Use the soft-hyphen character (­)
• Use an odd character in Unicode (​)

The idea the latter two is that if the browser sees that there is no room, the word should break and the line being broken will get a real hyphen. Some server-side code or JavaScript will have to be used in order to insert these special characters (or tag) that advise the browser where to fold the line if necessary. What I found amazing is that our brave, beloved, Firefox, does not conform to all three of the suggested options but IE 7 and (gulp, I am going to say it) Safari 3 do. Still, I would take my lumps and go with something that gets the job done.