Extra hyphen at end of word if ­ is used in middle of the word and the parent div is narrow

Question

When I use a soft hyphen in the middle of a word like this:

<div>
  <span style="font-size: 2em">
    <a href="/Page.aspx?pageID=23">SPECIAL&shy;BEST&Auml;LLNING</a>
  </span>
  <br />
  <a href="/Page.aspx?pageID=23">
    <span style="font-size:1.4em">L&auml;s mer h&auml;r &raquo;</span>
  </a>
</div>

and the parent div is narrow enough, I get a hyphen both at the expected place, but also in the end of the word like this:

Why? It only occurs in google chrome so maybe it is a bug?

css

div
{
  background: #ee7601;
  height: 11.8em;
  color: #fff;
  padding: 1em;
  padding-top: 1.6em;
  text-align: center;
  width: 218px;
}

a
{
  color: inherit;
}

http://jsfiddle.net/e508oppo/2/

Answer 1

The ­ will automatically create a line break, and it seems that after that, the browser considers the word separated as two different words. (Soft hyphen in HTML (<wbr> vs. &shy;)).

Here, since your second party of word is too long (the G would go to the line if the container had word-break) the browser puts an hyphen at the end of it, because the use of ­ before makes it think it should, but without line breaking because you did not set a word-wrap/break on the container

By giving a bigger size to the block, it should work fine http://jsfiddle.net/e508oppo/4/