Soft hyphen in HTML (<wbr> vs. &shy;)

How do you solve the problem with soft hyphens on your web pages? In a text there can be long words which you might want to line break with a hyphen. But you do not want the hyphen to show if the whole word is on the same line.

According to comments on this page <wbr> is a non standard "tag soup invented by Netscape". It seems like ­ has its problems with standard compliance as well. There seems to be no way to get a working solution for all browsers.

Which is your way for handling soft hyphens and why did you choose it? Is there a preferred solution or best practice?

Unfortunately, &shy's support is so inconsistent between browsers that it can't really be used.

QuirksMode is right -- there's no good way to use soft hyphens in HTML right now. See what you can do to go without them.

2013 edit: According to QuirksMode, ­ now works/is supported on all major browsers.

Feb 2015 summary (partially updated Nov 2017)

They all perform pretty well, ­ edges it as Google can still index of words containing it.

• In browsers: ­ and ­ both display as expected in major browsers (even old IE!). <wbr> isn't supported in recent versions of IE (10 or 11) and doesn't work properly in Edge.
• When copied and pasted from browsers: (tested 2015) as expected for ­ and ­ for Chrome and Firefox on Mac, on Windows (10), it keeps the characters and pastes hard hyphens into Notepad and invisible soft hyphens into applications that support them. IE (win7) always pastes with hyphens, even in IE10, and Safari (Mac) copies in a way which pastes as hyphens in some applications (e.g. MS Word), but not others
• Find on page works for ­ and ­ on all browsers except IE which only matches exact copied-and-pasted matches (even up to IE11)
• Search engines: Google matches words containing ­ with words typed normally. As of 2017 it appears to no longer match words containing ­. Yandex appers to be the same. Bing and Baidu seem to not match either.

Test it

For up-to-date live testing, here are some examples of unique words with soft hyphens.

• ­ - confumbabbl­ication­ism - confumbabbl­ication­ism
  • ..............................................................................................................confumbabbl­ication­ism
  • ..................................................................................................................confumbabbl­ication­ism

<wbr> - donfounbabbl<wbr>ication<wbr>ism. This site removes <wbr/> from output. Here's a jsbin.com snippet for testing.

• ­ - eonfulbabbl­ication­ism - eonfulbabbl­ication­ism
  • .................................................................................................................eonfulbabbl­ication­ism
  • ....................................................................................................................eonfulbabbl­ication­ism

Here they are with no shy hyphens (this is for copying and pasting into find-on-page testing; written in a way which won't break the search engine tests):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Display across browsers

Success: displaying as a normal word, except where it should break, when it breaks and hyphenates in the specified place.

Failure: displaying unusually, or failing to break in the intended place.

• Chrome (40.0.2214.115, Mac): ­ success, <wbr> success, ­ success
• Firefox (35.0.1, Mac): ­ success, <wbr> success, ­ success
• Safari (6.1.2, Mac): ­ success, <wbr> not tested yet, ­ success
• Edge (Windows 10): ­ success, <wbr> fail (break but no hyphen), ­ success
• IE11 (Windows 10): ­ success, <wbr> fail (no break), ­ success
• IE10 (Windows 10): ­ success, <wbr> fail (no break), ­ success
• IE8 (Windows 7): erratic - sometimes, none of them work at all and they all just follow css word-wrap. Sometimes, they seem to all work. Not yet found any clear pattern as to why.
• IE7 (Windows 7): ­ success, <wbr> success, ­ success

Copy-paste across browsers

Success: copying and pasting the whole word, unhyphenated. (tested on Mac pasting into browser search, MS Word 2011, and Sublime Text)

Failure: pasting with a hyphen, space, line break, or with junk characters.

• Chrome (40.0.2214.115, Mac): ­ success, <wbr> success, ­ success
• Firefox (35.0.1, Mac): ­ success, <wbr> success, ­ success
• Safari (6.1.2, Mac): ­ fail into MS Word (pastes all as hyphens), success in other applications <wbr> fail, ­ fail into MS Word (pastes all as hyphens), success in other applications
• IE10 (Win7): ­ fail pastes all as hyphens, <wbr> fail, ­ fail pastes all as hyphens
• IE8 (Win7): ­ fail pastes all as hyphens, <wbr> fail, ­ fail pastes all as hyphens
• IE7 (Win7): ­ fail pastes all as hyphens, <wbr> fail, ­ fail pastes all as hyphens

Search engine matching

Updated in November 2017. <wbr> not tested because StackOverflow's CMS stripped it out.

Success: searches on the whole, non-hyphenated word find this page.

Failure: search engines only find this page on searches for the broken segments of the words, or a word with hyphens.

• Google: ­ fails, ­ succeeds
• Bing: ­ fails, ­ fails
• Baidu: ­ fails, ­ fails (can match fragments within longer strings but not the words on their own containing a ­ or ­)
• Yandex: ­ fails, ­ succeeds (though it's possible it's matching a string fragment like Baidu, not 100% sure)

Find on page across browsers

Success and failure as search engine matching.

• Chrome (40.0.2214.115, Mac): ­ success, <wbr> success, ­ success
• Firefox (35.0.1, Mac): ­ success, <wbr> success, ­ success
• Safari (6.1.2, Mac): ­ success, <wbr> success, ­ success
• IE10 (Win7): ­ fail only matches when both contain shy hyphens, <wbr> success, ­ fail only matches when both contain shy hyphens
• IE8 (Win7): ­ fail only matches when both contain shy hyphens, <wbr> success, ­ fail only matches when both contain shy hyphens
• IE7 (Win7): ­ fail only matches when both contain shy hyphens, <wbr> success, ­ fail only matches when both contain shy hyphens

There is an ongoing effort to standardize hyphenation in CSS3.

Some modern browsers, notably Safari and Firefox, already support this. Here is a good and up to date reference on browser support.

Once the CSS hyphenation gets implemented universally, that would be the best solution. In the meantime, I can recommend Hyphenator - a JS script that figures out how to hyphenate your text in the way most appropriate for a particular browser.

Hyphenator:

• relies on Franklin M. Liangs hyphenation algorithm, commonly known from LaTeX and OpenOffice.
• uses CSS3 hyphenation where it is available,
• automatically inserts ­ on most other browsers,
• supports multiple languages,
• is highly configurable,
• gracefully falls back in case javascript is not enabled.

I've used it and it works great!