Problem
How do you deal with the issue of soft hyphens on your website? There may be long words in a text that you want to line break with a hyphen. However, if the entire word is on the same line, you don’t want the hyphen to show.
wbr> is a non-standard “tag soup invented by Netscape,” according to comments on this page. It appears that is having issues with standard compliance as well. There appears to be no way to create a solution that works across all browsers.
Which method do you use to handle soft hyphens, and why did you chose that one? Is there a preferred or best practice solution?
Asked by Pontus
Solution #1
Unfortunately, ’s support is so inconsistent between browsers that it can’t really be used.
Right now, there’s no good way to use soft hyphens in HTML, according to QuirksMode. Examine your options for surviving without them.
now works/is supported on all major browsers, according to QuirksMode.
Answered by Marco
Solution #2
They all perform admirably, but takes the lead since Google can still index words that contain it.
Here are some samples of unique terms with soft hyphens for current live testing.
donfounbabblwbr>icationwbr>ism wbr> wbr/> is removed from the output on this site. For testing, here’s a jsbin.com snippet.
Here they are, without the shy hyphens (for copying and pasting into find-on-page testing; written in a way that will not break the search engine tests):
ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ
Success: it appears as a normal word except where it should break, which it does when it breaks and hyphenates in the stated location.
Failure is defined as an unexpected display or a failure to break in the anticipated location.
Success: copying and pasting the entire word without any hyphens. (Paste into browser search on Mac, MS Word 2011, and Sublime Text)
Pasting with a hyphen, space, line break, or trash characters is a fail.
In November 2017, the information was updated. wbr> StackOverflow’s CMS stripped it away, thus it hasn’t been tried.
This page is found by searching for the entire, non-hyphenated term.
Failure: Search engines only locate this page when they look for broken word fragments or hyphenated words.
As a search engine match, success and failure.
Answered by user56reinstatemonica8
Solution #3
In CSS3, there is now an effort to standardize hyphenation.
This is already supported by some current browsers, including Safari and Firefox. A solid and up-to-date resource on browser support may be found here.
That would be the ideal solution once CSS hyphenation is universally enabled. In the interim, I can recommend Hyphenator, a JS script that determines how to hyphenate your text in the best way possible for each browser.
Hyphenator:
I’ve tried it and it’s fantastic!
Answered by Dominik
Solution #4
I use , which I manually input when necessary.
I always think it’s a shame that people don’t use techniques because some—possibly outdated or strange—browser doesn’t handle them the way they’re supposed to. I discovered that works fine in both recent versions of Internet Explorer and Firefox, so that should suffice. If people come around with an odd browser, you may include a browser check instructing them to use something adult or continue at their own risk.
Syllabification isn’t simple, and I wouldn’t trust it to some Javascript. If you don’t want your content to become irritating, it’s a language-specific topic that should be thoroughly revised by the deskman. Some languages, such as German, create complex words, which might cause breakdown issues. Spargelder (germ. saved money, pl.) can, for example, be wrapped in two locations according to syllabification requirements (Spar-gel-der). Wrapping it in the second place, on the other hand, causes the first portion to appear as Spargel- (germ. asparagus), which activates a wholly incorrect concept in the reader’s mind and should be avoided.
What about the Wachstube string? It could mean ‘guardroom’ (Wach-stu-be) or ‘wax tube’ (Wach-stu-be) (Wachs-tu-be). There are likely to be more examples in other languages as well. You should strive to create an environment in which the deskman may be assisted in writing a well-syllabified document, with each essential word proofread.
Answered by Matthias Ronge
Solution #5
It’s critical to remember that wbr> and are not supposed to do the same thing in HTML5!
Soft hyphens
is a soft hyphen, i.e., U+00AD: SOFT HYPHEN. As an example,
innehålls­förteckning
could be seen as
innehållsförteckning
or as
innehålls-
förteckning
Soft hyphens are currently supported by Firefox, Chrome, and Internet Explorer.
The wbr element
The wbr element is a word-break opportunity, and if a line break occurs, it will not display a hyphen. As an example,
ABCDEFG<wbr/>abcdefg
could be seen as
ABCDEFGabcdefg
or as
ABCDEFG
abcdefg
This element is currently supported by Firefox and Chrome.
Answered by Andreas Rejbrand
Post is based on https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy