在HTML中将图标和单词保持在同一行

Question

我在链接旁边的网站上使用Font Awesome图标，我无法弄清楚如何强制链接的第一个单词与图标保持在同一行。

这是一个JSFiddle示例http://jsfiddle.net/un5hwhca/

我正在尝试使用 将它们保持在一起，但它没有做到这一点，正如您在屏幕截图中看到的那样，它只是被推到了下一行的开头。

Answer 1

将此CSS添加到您的链接：

style="white-space: nowrap;"

[Updated fiddle]

或者如果你只想让图像和第一个单词粘在一起，但让链接的其余部分换行，将图像和第一个单词放在span中，然后将样式应用到那个，像

<a href="https://en.wikipedia.org/wiki/Asteroids_(video_game)" target="_blank">
    <span style="white-space: nowrap;">
        <i class="fa fa-external-link"></i>
        some
    </span>
    very interesting Asteroids
</a>

[Fiddle]