­ How to get rid of the extra hyphen at the end of word

Question

I have a word that I have put a ­ inside. It hyphens alright until I get to a small enough screen size then it adds an extra hyphen at the end.

Edit: Can't reproduce it in jsfiddle, because it seems to interpret the html differently. I can show a picture of the problem however

<h3>
Flu&shy;ffyluffy Some&shy;something</h3>

Becomes

With an extra hyphen at the end

I saw this and didn't really like the answer, Extra hyphen at end of word if ­ is used in middle of the word and the parent div is narrow. "just make the div wider".

Are there any ways to make it not add extra hyphens I didn't ask for instead?

Writing

<h3 class="something">Something Something&shy;Something</h3>



<style>
.something{
 width:85px
}
<\style>

On http://htmledit.squarefree.com/

Causes a similar issue but not quite. I can only seem to replicate with Chrome

Answer 1

Can you use flex?

Codepen

HTML

It seems to work in chrome for me if I add display: inline-flex;

<h3 class="something">
  Flu&shy;ffyluffy Some&shy;something
</h3>

CSS

.something{
 width:60px;
 display: inline-flex;
}