如何避免在“：之前”之后的换行符在CSS

Question

在我的网站上，我对某些链接类型使用了字体图标。这些图标通过: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。

不幸的是，你需要“display：inline-block”来显示SVG。简单的解决方案是在“a”上放置“display：inline-block”。这会导致你的SVG正确渲染，并且它会保持你的a：before和a在一起。

Answer 2

这是好得多nowrap规则添加到:before CSS：

white-space: nowrap; 

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

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