CSSの "：before"の後の改行を避ける方法

Question

私のウェブサイトでは、特定のリンクタイプにフォントアイコンを使用しています。これらのアイコンは:before CSSシンタックスで追加されます。このリンクは、行の先頭にあるとき

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

しかし、それは時々、そのアイコンから分離しています：

私は上記のCSSルールに white-space: nowrapを追加してみました

が、それはしませんでした助けて。

どのようにアイコンとテキストをまとめて保存しますか？（CSS 3は大丈夫です）

注：私はwhite-space: nowrapで全体リンクをフォーマットする必要はありません。単にdisplay:inline-block;を削除

Answer 1

は、この問題を修正するようだ：

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

JSFiddle。

残念ながら、SVGを表示するには、 "display：inline-block"が必要です。簡単な解決策は、 "a："に "display：inline-block"を入れることです。これによりSVGが適切にレンダリングされ、a：beforeとaを1行にまとめることができます。

Answer 2

:before CSSにnowrapルールを追加することがはるかに優れています：

white-space: nowrap; 

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

nowrapルールの理由は:beforeで画像コンテンツで正しく動作することです。テキストコンテンツは、このルールがメインエレメントの近くにとどまる必要はありません。