如何避免CSS中“:before”之后的换行

在我的网站上，我对某些链接类型使用字体图标。这些图标是通过添加的:beforeCSS 语法。

a.some-link:before {
  font-family: icons;
  display: inline-block;
  padding-right: 0.3em;
  content: 'x';
}

但是，当此链接位于行首时，它有时会与其图标分开：

我尝试添加white-space: nowrap上面的 CSS 规则但这没有帮助。

如何将图标和文本放在一起？（CSS 3 没问题）

注意：我不想格式化whole链接到white-space: nowrap.

只需删除display:inline-block;似乎解决了这个问题：

a.some-link:before {
    font-family: icons;
    padding-right: 0.3em;
    content: 'x';
}

JSFiddle http://jsfiddle.net/MMbKK/.

不幸的是，您需要“display: inline-block”来显示 SVG。简单的解决方案是将“display: inline-block”放在“a”上。这将使您的 SVG 正确渲染，并且将您的 a:before 和 a 放在一行上。