29

how can I prevent a newline to be inserted between a fontawesome icon and the text that is near this icon ?

See the fiddle, I have a nbsp, but it is discarded.

In the example below, I don't want a wrap to ever occur between the icon and the word "first", but it can occur between "first" and "second". It doesn't work though, see the fiddle.

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

It is related to this question, but I can't seem to make it work:

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

Community
  • 1
  • 1
falconbur
  • 315
  • 1
  • 4
  • 6
  • And where is your code? – Ed T. Feb 24 '14 at 16:17
  • I linked to the jsfiddle.net – falconbur Feb 24 '14 at 16:18
  • Well, it doesn't adds a new line, it goes on a new line because your .test is 20px wide. if you make it bigger it will stay on the same line http://jsfiddle.net/pueyY/3/ – Ed T. Feb 24 '14 at 16:23
  • In other words, browser tries to prevent overflow – Ed T. Feb 24 '14 at 16:24
  • But that's what I mean, I don't want it to break at this point, it can break at any other place but this one, I want the icon to always stay near the first word, no matter what. – falconbur Feb 24 '14 at 16:24
  • 1
    Try to add `white-space: nowrap;` to your `.test` class – Ed T. Feb 24 '14 at 16:31
  • I edited my question to try to make this point clearer. Basically if there's my icon + firstWord + secondWord, I want it to try to wrap between the first and the second word, rather than between the icon and the first word. I do want it to wrap, just not here – falconbur Feb 24 '14 at 16:32
  • @EdT. Finally! I was looking so long for a solution and this worked! :D Thanks – TKret96 Jan 30 '20 at 11:56

4 Answers4

30

Add the CSS: .fa { display:inline; }

Demo fiddle.

z0r
  • 8,185
  • 4
  • 64
  • 83
jasonhansel
  • 642
  • 9
  • 14
3

Since the text you're trying to NOT wrap is not inside any element, how would css know where to wrap or not wrap? The width of the jsfiddle .test was 20px, that is the same width (approx) of the icon, so I don't really understand. If you don't want something to wrap, here's one way of doing this, wrap what you want to not wrap inside an inline element, like a span, then add the class you want on that 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}

Demo: http://jsbin.com/rineye/2/edit

Christina
  • 34,296
  • 17
  • 83
  • 119
2

I had this issue and the cause was that the font awesome icon was automatically being inserted within it's own new p element. I'm not sure why this was happening, but I solved it with this CSS:

p { display: inline;}

Make sure you specify which p element you're targeting, so that you don't change every p element on your page!

alanpaulprice
  • 21
  • 1
0

This seems to work, click Run code snippet below:

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>
  • Actually, it seems to trigger some strange span-width-measuring bug on chrome. But using only one element and the icon as :before works nicely. –  Mar 01 '17 at 23:21