CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel
Daniel

Reputation: 75

Line break between icon and text even with  ?

I can't figure out how to put a non breakable space between an icon and the corresponding text.

For example

<i class="bla"></i>&nbsp;someText

ignores the &nbsp; in lower screen resolutions and displays the text under the icon. Is there any other method to make sure that an icon and some text to the right is always in line, regardless of the available space?

Thanks in advance!

Upvotes: 6

Views: 3123

Answers (3)

N&#235;phylhim
N&#235;phylhim

Reputation: 11

If you want to have different rules depending on the screen size, you can use media queries. to have a space after your block "i" you can add margin or create a container that have a width of some lettres (using em unit).

http://www.w3.org/TR/css3-mediaqueries/

<i class="bla"></i> someText

css:

@media screen and (max-width: 640px){
    i{
        margin-right: 0em;
    }
}
@media screen and (min-width: 641px){
    i{
        margin-right: 3em;
    }
}

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Set a container and use the rule white-space

HTML

<div class="container"><i class="bla"></i>&nbsp;someText</div>

CSS

.container{
display: block;
white-space: nowrap;
}

DEMO HERE

Read more about white-space

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Upvotes: 5

Ahmad
Ahmad

Reputation: 12737

the <i> element by itself is not a block element. Meaning, it would not try to take the whole vertical space it can get, unless you tell it to do so in your CSS.

Check if you have set the styling of .bla and see if its display is not block; .. 

.bla {
  display: block;
}
<i class='bla'>block i element -- new line after me</i>&nbsp;Some Text here


<br>
<br>


<i class='bla2'>non block i element -- </i>&nbsp;Some Text here

Upvotes: 0

Related Questions