Line break between icon and text even with  ?

Question

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

Answer 1

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