Safari浮动：左侧和连字符：自动

Question

我在Safari（10，Mac）中有一个有趣的错误元素（显示：inline-block和float：left）和连字符：auto。 我无法将此图标浮动到文本中。 我使用连字符：auto，因为可以有一个长文本链接。

HTML：

<div class="main">
<a href="/">
<i class="fa fa-external-link" aria-hidden="true"></i> sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing_sometext_without_spacing</a>
</div>

的CSS：

.main {
  width: 300px;
  word-break: break-word;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}
.fa {
  display: inline-block;
  float: left;
}

您可以在codepen上看到此示例：

和截图：

谢谢，祝你有愉快的一天：）