Fontawesome icône empêcher de saut de ligne d'emballage

comment puis-je empêcher un retour à la ligne à être inséré entre une fontawesome icône et le texte qui est près de cette icône ?

Voir le violon, j'ai un nbsp, mais il est rejeté.

Dans l'exemple ci-dessous, je ne veux pas d'une enveloppe de jamais se produire entre l'icône et le mot "d'abord", mais il peut se produire entre la "première" et "deuxième". Il ne fonctionne pas bien, voir le violon.

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

Il est lié à cette question, mais je n'arrive pas à le faire fonctionner:

Joindre l'icône de police au dernier mot dans la chaîne de texte et à prévenir l'emballage

Et où est ton code?
J'ai relié à la jsfiddle.net
Eh bien, il ne prend pas en ajoute une nouvelle ligne, il va sur une nouvelle ligne parce que votre .le test est à 20 pixels de large. si vous le faites, plus il va rester sur la même ligne jsfiddle.net/pueyY/3
En d'autres termes, le navigateur tente d'empêcher le débordement
Mais c'est ce que je veux dire, je ne veux pas casser à ce stade, il peut se casser à tout autre endroit, mais celui-ci, je veux l'icône de toujours rester à proximité de le premier mot, n'importe quoi.

OriginalL'auteur falconbur | 2014-02-24

19

Ajouter le CSS: .fa { display:inline; }

Démo de violon.

Cela a fonctionné pour moi aussi merci!

OriginalL'auteur jasonhansel
2

Depuis le texte que vous êtes en essayant de ne PAS envelopper n'est pas à l'intérieur de n'importe quel élément, comment css sais où pour envelopper ou pas envelopper? La largeur de la jsfiddle .le test a été 20px, c'est la même largeur (environ) de l'icône, donc je ne comprends pas vraiment. Si vous ne voulez pas quelque chose à envelopper, voici une façon de faire ceci, faites ce que vous voulez de ne pas envelopper à l'intérieur d'un élément inline, comme une plage, puis ajouter la classe que vous souhaitez sur cette période.

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}
```
Démo: http://jsbin.com/rineye/2/edit

OriginalL'auteur Christina
1

J'ai eu ce problème et la cause était que la police génial icône est automatiquement inséré à l'intérieur de son propre p de l'élément. Je ne suis pas sûr de savoir pourquoi ce qui se passait, mais je l'ai résolu avec ce CSS:

p { display: inline;}

Assurez-vous de spécifier le p de l'élément que vous ciblez, de sorte que vous n'avez pas à modifier chaque élément p sur votre page!

C'est ce qui a fonctionné pour moi aussi

OriginalL'auteur alanpaulprice

Vous devez vous connecter pour publier un commentaire.

Démo: http://jsbin.com/rineye/2/edit