如果在单词的中间使用了单词末尾的额外连字符，则父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足够窄，我在预期的位置得到一个连字符，但也在这个词的末尾如下：

为什么呢？它只出现在谷歌浏览器中，所以也许这是一个错误？

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

­将自动创建换行符，之后，浏览器似乎将单词分隔为两个不同的单词。 （Soft hyphen in HTML (<wbr> vs. &shy;)）。

在这里，由于你的第二个单词太长了（如果容器有word-break，G会转到该行），浏览器会在其末尾添加一个连字符，因为使用了{{1之前让它认为它应该，但没有换行，因为你没有在容器上设置自动换行/中断

通过为块提供更大的大小，它应该可以正常工作http://jsfiddle.net/e508oppo/4/