Fontawesome 图标可防止换行

Question

如何防止在 fontawesome 图标和该图标附近的文本之间插入换行符？

看到fiddle，我有一个nbsp，但是被丢弃了。

在下面的示例中，我不希望在图标和单词“first”之间出现换行，但它可以出现在“first”和“second”之间。但它不起作用，请参阅小提琴。

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

这与这个问题有关，但我似乎无法使其工作：

Attach font icon to last word in text string and prevent from wrapping

Answer 1

添加 CSS：.fa { display:inline; }

Demo fiddle.

Answer 2

由于您尝试不换行的文本不在任何元素内，css 怎么知道在哪里换行或不换行？ jsfiddle .test 的宽度为 20px，与图标的宽度（大约）相同，所以我不太明白。如果你不想包装某些东西，这里有一种方法，将你不想包装的东西包装在一个内联元素中，比如一个跨度，然后在那个跨度上添加你想要的类。

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

Answer 3

我遇到了这个问题，原因是字体真棒图标被自动插入到它自己的新 p 元素中。我不确定为什么会这样，但我用这个 CSS 解决了它：

p { display: inline;}

确保您指定了您要定位的 p 元素，这样您就不会更改页面上的每个 p 元素！

Answer 4

这似乎行得通，点击下面的Run code sn-p：

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>