Разрыв строки между значком и текстом даже с ?

Question

Я не могу понять, как поставить непроницаемое пространство между значком и соответствующим текстом.

Например

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

игнорирует   в низких разрешениях экрана и отображает текст под значком. Есть ли другой способ убедиться, что значок и некоторый текст справа всегда находятся в строке, независимо от доступного пространства?

Заранее благодарен!

Answer 1

Установить контейнер и использовать правило white-space

HTML

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

CSS

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

DEMO HERE

Подробнее о white-space

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

Answer 2

<i> элемент сам по себе не является block элементом. Значит, он не попытался бы взять все вертикальное пространство, которое может получить, если вы не скажете это сделать в своем CSS.

Проверьте, если вы установили стилизации .bla и посмотреть, если его display не 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

Answer 3

Если вы хотите иметь различные правила в зависимости от размера экрана, вы могут использовать медиа-запросы. чтобы иметь пробел после вашего блока «i», вы можете добавить маркер или создать контейнер с шириной некоторых листов (с использованием 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; 
    } 
}