14

私のウェブサイトでは、特定のリンクタイプにフォントアイコンを使用しています。これらのアイコンは、: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

4

3 に答える 3

10

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

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 行にまとめられます。

于 2013-02-13T10:42:07.727 に答える
4

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

white-space: nowrap;

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

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

于 2014-07-16T15:25:08.500 に答える