First time visitor? The tutorials start here.

Soft Word Breaks For Long Words

It used to be that, whenever you wanted to allow a long word to break at the end of a line without forcing it, then you might have added a <wbr> there. Since most browsers wouldn’t insert a dash at the break, it was also necessary to use a CSS pseudo-class to display that dash. However, since IE didn’t recognize pseudo-classes until IE8, and the majority of people on the internet were still using IE, this was hardly a solution.

As if this wasn’t bad enough, Microsoft had to make matters even worse with the introduction of IE8, which doesn’t recognize the <wbr> tag at all! But that’s ok, because <wbr> isn’t even standards-compliant, so I actually have to give IE kudos for that one.

Luckily, we have other options that are standards-compliant. One option, inserting &#8203; instead of <wbr>, will break the word, but it won’t insert the dash. Further, since it’s an ASCII code and not a tag, you can’t even use a CSS pseudo-class to insert that dash like you could with wbr.

The other option is to insert &shy; where you want to allow that word to break. This might have been a problem just over a year ago, since Firefox 2 didn’t support it. But the good news is, it was probably the only browser that didn’t support it at the time (which actually surprised me), and that doesn’t look like a real concern anymore. Looking at this site’s logs, not a single person who visited this site since its launch was using FF2.

Are you &shy;?

Whether you have narrow columns in your page layout, or you just hate the way a big empty space looks at the end of a line, allowing a long word to break without forcing it can be very useful. In fact, even if you have a fixed width layout and can force a break in a word with <br />, that would be a very bad solution for accessibility reasons, because aural screen readers would read that out loud as two different words.

The implementation of &shy; is very simple. Just insert it into long words, wherever you would like to allow the word to break. You may have one or several of these in one long word, and browsers will choose the best place to break the word, when needed, as you can see below:

Super&shy;cali&shy;fra&shy;gi&shy;lis&shy;tic&shy;expi&shy;olo&shy;do&shy;cious

Where the word occurs below, each occurrence uses the same breaking points as the line above:

x Super­cali­fra­gi­lis­tic­expi­olo­do­cious Super­cali­fra­gi­lis­tic­expi­olo­do­cious x x x Super­cali­fra­gi­lis­tic­expi­olo­do­cious x x x x x Super­cali­fra­gi­lis­tic­expi­olo­do­cious x x Super­cali­fra­gi­lis­tic­expi­olo­do­cious

You don’t need to use so many shys in one word, but this was done for demonstration purposes.

That’s pretty much all there is to it! 😀

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.