How to use the shy soft hyphen in HTML

— 2 minute read

The other day I created a cool example using the <wbr> HTML tag. And although its a very cool tag on it's own, there might be a better solution:

We can use &shy. It is a soft hyphen in HTML.

It means that it will add a - if the word is too long. Else it will just render the word as is.

I'll be using my <wbr> demo to add the soft hyphen as an option.

shy HTML

How the ­ works

You can basically place the ­ in a word or in places where you want it to enter a soft hyphen when the word is too long for its container:

super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better

As you can see, the implementation is the same as we saw with <wbr> however, this not an HTML element but an entity.

Demo

In the following Codepen, I demonstrate three methods:

  • shy: using the &shy; in the word
  • wbr: using the <wbr> in the word
  • css: using word-break in css.

See the Pen Using the shy soft hyphen by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter