css - CSSの「：before」の後の改行を回避する方法

Question

私のウェブサイトでは、特定のリンクタイプにフォントアイコンを使用しています。これらのアイコンは、:beforeCSS構文を介して追加されます。

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。

score 10 · Accepted Answer

を削除するだけで、display:inline-block;この問題は解決するようです:

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

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

score 4 · Accepted Answer

cssにnowrapルールを追加する方がはるかに優れています。:before

white-space: nowrap;

nowrapルールの理由は、の画像コンテンツを適切に処理するため:beforeです。テキストコンテンツは、メイン要素の近くにとどまるためにこのルールを必要としません。

3 に答える 3