如何避免在「：之前」之後的換行符在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正常工作。文本內容不需要這個規則來留在主要元素附近。