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

user_5392 0
Viewed 180699

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 &shy; 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?

See related SO Discussion here.

wbr soft-hyphen text html
13 Answers

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, &shy; now works/is supported on all major browsers.

Marco_304800

This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery);
user_2528950

<wbr> and &shy;

Today you can use both.

<wbr> use to break and do not put more information.

Example, use to show links:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&shy; when necessary, at this point the text will break and add a hyphen.

Example:

"É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}
<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>

user_52738030

Keep it simple. A soft hyphen is just a character. Like A or B or . You don't need a special character to include it, you can just type it (if your computer is set up for that), or copy/paste it from elsewhere. Like here: Soft Hyphen on unicode explorer

Of course, the character you should copy is invisible, so that makes it a little difficult I guess :) But it still works. Right-click and copy.

You also don't need to render text containing a soft hyphen in any special way (like "DangerouslySetInnerHTML" with React). It is just a character; it works like it should in all relevant browsers worth any amount of salt.

As an example, in the next paragraph I will write the phrase "a really long word with soft hyphens instead of whitespace that should span at least two lines ow text no matter how big your screen is". Except I'll put in soft hyphens instead of whitespace. Here goes:

a­really­long­word­with­soft­hyphens­instead­of­whitespace­that­should­span­at­least­two­lines­of­text­no­matter­how­big­your­screen­is

user_32786540
Related