Question

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

请参阅fiddle，我有，但它被丢弃了。

在下面的示例中，我不希望在图标和单词“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，就是图标的宽度（大约），所以我真的不明白。如果你不想要包装东西，这是一种方法，将你想要的内容包装在内联元素中，比如span，然后在那个范围内添加你想要的类。

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

这似乎有效，请点击下面的运行代码段：

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>

Fontawesome图标阻止换行包装

4 个答案:

演示：http://jsbin.com/rineye/2/edit