DEV Community

Cover image for Using the shy soft hyphen in HTML
Chris Bongers
Chris Bongers

Posted on • Originally published at

Using the shy soft hyphen in HTML

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 this 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 now also add the shy as an option.

HTML shy

How the ­ works

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

Enter fullscreen mode Exit fullscreen mode

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


In the following demo, I've demonstrated three methods:

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

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

Top comments (2)

lexlohr profile image
Alex Lohr

There's another interesting standard here: - unfortunately, there's no support from Chrome for other languages than English.

dailydevtips1 profile image
Chris Bongers

Yes was looking at that one icw word-break, but found that the support is laggy and you won't have the option to specify your breaks.