Значок Fontawesome предотвращает перенос новой строки

как я могу предотвратить добавление новой строки между значком fontawesome и текстом, который находится рядом с этим значком?

Смотрите fiddle, у меня есть nbsp, но он отбрасывается.

В приведенном ниже примере я не хочу, чтобы между значком и словом "first" всегда происходил обход, но он может встречаться между "первым" и "вторым". Однако это не работает, см. Скрипку.

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

Это связано с этим вопросом, но я не могу заставить его работать:

Прикрепить значок шрифта к последнему слову в текстовой строке и предотвратить обертку

Ответы

Ответ 2

Так как текст, который вы пытаетесь НЕ обернуть, не находится внутри какого-либо элемента, как css знает, где можно обернуть или не обернуть? Ширина jsfiddle.test составляла 20 пикселей, то есть такая же ширина (приблизительно) значка, поэтому я действительно не понимаю. Если вы не хотите, чтобы что-то обертывалось, вот один из способов сделать это, оберните то, что вы хотите не вставить внутри встроенного элемента, например, span, а затем добавьте класс, который вы хотите на этом промежутке.

HTML             АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЫЭЮЯ   

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

Ответ 3

У меня была эта проблема, и причина заключалась в том, что шрифт awesome был автоматически вставлен в свой собственный новый элемент p. Я не уверен, почему это происходит, но я решил это с помощью этого CSS:

p { display: inline;}

Убедитесь, что вы указываете, какой элемент p вы планируете, чтобы вы не меняли каждый элемент p на своей странице!

Ответ 4

Это похоже на работу, нажмите 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" />

<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>