如何避免后换行“：之前”中的CSS(How to avoid line breaks after “

在我的网站我使用某些链接类型字体图标。 这些图标是通过补充:before的CSS语法。

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

然而，当这种联系是在一行的开头，它有时从它的图标分开：

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

如何保持图标和文本一起？ （CSS 3是好的）

注意：我不想用格式化整个链路white-space: nowrap 。

Answer 1:

简单地移除display:inline-block; 似乎解决这个问题：

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

的jsfiddle 。

不幸的是，你需要 “显示：inline-block的” 显示SVG。 简单的解决方案是把“显示：直列块”上的“A”。 这将导致你的SVG正确渲染，它会保持你的一个：之前和在一行的一个在一起。

Answer 2:

这是更好的补充nowrap规则:before的CSS：

white-space: nowrap;

UPD： http://jsfiddle.net/MMbKK/5/

原因nowrap规则是在图像内容的正常工作:before 。 文字内容不需要这个规则留在主元件附近。

文章来源: How to avoid line breaks after “:before” in CSS