web-dev-qa-db-ja.com

Fontawesomeアイコンは改行の折り返しを防ぎます

fontawesomeアイコンとこのアイコンの近くにあるテキストの間に改行が挿入されないようにするにはどうすればよいですか？

fiddle を参照してください。nbspがありますが、破棄されます。

下の例では、アイコンとWordの「最初」の間で折り返しが発生するのは望ましくありませんが、「最初」と「2番目」の間で発生する可能性があります。それは機能しませんが、フィドルを参照してください。

  <i class="fa fa-search"></i>&nbsp;first second

それはこの質問に関連していますが、私はそれを機能させることができないようです：

フォントアイコンをテキスト文字列の最後のWordに添付し、折り返さないようにします

htmlcssfont-awesome
24
falconbur

CSSを追加します：.fa { display:inline; }

デモフィドル 。

22
jasonhansel

ラップしないようにしようとしているテキストがどの要素内にもないため、CSSはラップする場所またはラップしない場所をどのようにして知るのでしょうか？ jsfiddle .testの幅は20pxで、アイコンの幅とほぼ同じなので、よくわかりません。ラップしたくないものがある場合は、これを行う1つの方法として、インライン要素内でラップしたくないものをスパンなどのようにラップし、そのスパンに必要なクラスを追加します。

HTML Abcdef ghijklmnopqrstuvwxyz

CSS：

.test {
    width: 100px; /*20px is too small the icon is 20px (approx) you need more space */
}

.test span {white-space:nowrap}

デモ： http://jsbin.com/rineye/2/edit

2
Christina

私はこの問題を抱えていましたが、原因はフォントの素晴らしいアイコンが独自の新しいp要素内に自動的に挿入されていたことです。なぜこれが起こったのかはわかりませんが、次のCSSで解決しました。

p { display: inline;}

ページ上のすべてのp要素を変更しないように、ターゲットにしているp要素を必ず指定してください。

1
alanpaulprice

これは動作するようです、クリックしてください Run code snippet 未満：

body {
  text-align: center;
}

.resizable-wrapper {
  border: solid 1px black;
  resize: both;
  overflow: auto;
}

.item {
  position: relative;
  padding-left: 20px;
}

.item + .item {
  margin-left: 20px;
}

.fa {
  position: absolute;
  top: 0;
  left: 0;
}
<div class="resizable-wrapper">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="item"><i class="fa fa-flag"></i>Lorem</span> <!-- lots of these -->
<span class="item"><i class="fa fa-flag"></i>ipsum</span>
<span class="item"><i class="fa fa-flag"></i>dolor</span> <span class="item"><i class="fa fa-flag"></i>sit</span> <span class="item"><i class="fa fa-flag"></i>amet,</span> <span class="item"><i class="fa fa-flag"></i>consectetur</span> <span class="item"><i class="fa fa-flag"></i>adipiscing</span> <span class="item"><i class="fa fa-flag"></i>elit.</span> <span class="item"><i class="fa fa-flag"></i>Proin</span> <span class="item"><i class="fa fa-flag"></i>rutrum</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>eget</span> <span class="item"><i class="fa fa-flag"></i>justo</span> <span class="item"><i class="fa fa-flag"></i>tempor</span> <span class="item"><i class="fa fa-flag"></i>ornare.</span> <span class="item"><i class="fa fa-flag"></i>Sed</span> <span class="item"><i class="fa fa-flag"></i>aliquam</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>sed</span> <span class="item"><i class="fa fa-flag"></i>quam</span> <span class="item"><i class="fa fa-flag"></i>facilisis</span> <span class="item"><i class="fa fa-flag"></i>fringilla.</span> <span class="item"><i class="fa fa-flag"></i>Pellentesque</span> <span class="item"><i class="fa fa-flag"></i>habitant</span>

</div>
0
user3638471