Дополнительный дефис в конце слова if & shy; используется в середине слова, а родительский div является узким

Question

Когда я использую мягкий дефис в середине слова, как это:

<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>

и родительский div достаточно узок, я получаю дефис как в ожидаемом месте, так и в конце слова вроде этого:

Зачем? Это происходит только в Google Chrome, так что, возможно, это ошибка?

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

­ автоматически создаст разрыв строки, и кажется, что после этого браузер считает слово разделенным как два разных слова. ( Мягкий дефис в HTML ( против & shy;)).

Здесь, поскольку ваша вторая сторона слова слишком длинная (G перешел бы на строку, если бы контейнер имел word-break) браузер ставит дефис в конце, потому что использование ­ before заставляет думать, что должно, но без разрыва строки, потому что вы не установили перенос слов / разрыв на контейнере

Придав блоку больший размер, он должен нормально работать http://jsfiddle.net/e508oppo/4/