empêche l'élément :after de passer à la ligne suivante

Question

J'ai ce HTML :

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

J'ajoute une icône à l'aide du pseudo-élément :after :

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

Le problème : si la largeur disponible est trop petite, l'icône s'enroule sur la ligne suivante. Je voudrais qu'elle reste sur la même ligne que le dernier mot du lien auquel elle est jointe :

Est-ce possible, sans ajouter 'nowrap' à l'ensemble du lien (je veux que les mots soient enveloppés, mais pas l'icône).

Voir jsFiddle aquí .

Answer 1

JSFiddle - http://jsfiddle.net/Bk38F/65/

Ajoutez une marge négative au pseudo-élément, pour compenser sa largeur :

ul li.completed a:after {
    background:transparent url(img1.png) no-repeat; 
    content: ' ';
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: -24px;
}

L'icône va alors déborder du conteneur et la ligne ne sera rompue que lorsque le texte atteindra la fin de la ligne. Si vous devez maintenir l'icône à l'intérieur de la largeur originale du conteneur, vous pouvez ajouter du rembourrage pour compenser à nouveau :

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

---

MISE À JOUR IMPORTANTE :

Pour que cette méthode fonctionne, il ne doit y avoir aucun espace blanc entre le texte et la balise de fermeture de l'élément contenant le pseudo-élément. Même si la largeur du pseudo-élément est compensée par une marge négative, l'espace blanc provoquera la rupture de la ligne lorsqu'elle rencontrera le bord de l'élément parent. Par exemple, cela fonctionne :

<span>text goes here</span>

et ceci n'a pas :

<span>
    text goes here
</span>

Answer 2

Cette question ressemble un peu à une réponse précédente, mais j'ai pensé que je devais l'étoffer et l'expliquer en détail.

Dès que vous avez défini display: inline-block , :after devient un élément non lié au texte. C'est pour cela qu'il est enveloppé, et que nowrap n'a aucun effet. Laissez donc display seul.

Comme il s'agit d'un élément de texte par défaut, le contenu se lie au texte précédent, pour autant qu'il n'y ait pas d'espace entre eux. N'en ajoutez donc pas, mais assurez-vous d'avoir content: "" ou c'est la même chose que display: none . Le seul problème est que height y width sont contrôlés par le content qui, dans ce cas, est effondrée. Donc width est 0 y height est la hauteur de la ligne.

Redimensionnez la zone avec du padding ; à gauche ou à droite, cela n'a pas d'importance. Ajoutez un peu de margin pour que l'icône ne touche pas le texte. Gardez tout en taille relative ( em , pt etc.), et utiliser background-size: contain de sorte que l'icône s'adapte au texte, comme un emoji ou une police. Enfin, positionnez l'icône où vous voulez avec background-position .

ul li.completed a:after {
  content: "";
  background: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em; /* spacing*/
  padding-right: 0.75em; /* sizing */
}

Je l'ai utilisé pour mes liens externes ( a[href*="://"]:after ), et il a bien fonctionné dans Firefox, Chrome et iOS. Et comme l'icône reste un élément de texte, même le texte qui suit directement l'icône est lié, de sorte que toute ponctuation finale sera également liée.

Answer 3

Vous pouvez ajouter l'image au dernier mot à la place. cela rendra le tout plus cohérent.

ajouter une classe à word <strong class="test">word</strong>

et .test:after { ...

http://jsfiddle.net/52dkR/

l'astuce consiste également à faire en sorte que cette classe soit inline-block

et si vous voulez garder le soulignement, voyez ceci.

http://jsfiddle.net/atcJJ/

ajouter text-decoration:inherit;

Answer 4

Si vous utilisez une police d'icônes : Utilisation de l'unicode "espace insécable". \00a0 ainsi que le contenu du pseudo-élément (dans ce cas, un glyphe Font Awesome).

Cela fonctionne sans balisage supplémentaire, formatage spécial ou noms de classe.

a[href^='http']::after {
  content: '\00a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

Le site line-height: 0; permet d'éviter que les lignes ne s'agitent lorsque le dernier mot + icône s'enroule.

Exemple de CodePen

Answer 5

J'avais le même problème. Je n'aimais pas vraiment l'idée d'ajouter des balises strong ou span au dernier mot, alors j'ai essayé d'ajouter simplement l'icône comme image d'arrière-plan avec un peu de padding-right au lieu d'utiliser les pseudo-éléments :after ou :before. Ça a marché pour moi !

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last word</a></li></ul>

---

ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}

http://jsfiddle.net/atcJJ/36/