empêcher: après l’élément de s’emballer à la ligne suivante

J’ai ce HTML:

 

J’ajoute une icône en utilisant le pseudo élément: après:

 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 passe à la ligne suivante. Je voudrais qu’il rest sur la même ligne que le dernier mot du lien ajouté à:

entrer la description de l'image ici

Est-ce faisable, sans append “nowrap” à l’ensemble du lien (je veux que les mots s’enroulent, mais pas l’icône).

Voir jsFiddle ici .

vous pouvez append l’image au dernier mot à la place. cela le fera casser ensemble.

append une classe au mot word

et .test:after { ...

http://jsfiddle.net/52dkR/

L’astuce consiste également à rendre cette classe inline-block

et si vous voulez garder le soulignement voir ceci.

http://jsfiddle.net/atcJJ/

append du text-decoration:inherit;

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; } 

Maintenant, cela va faire déborder l’icône du conteneur, et la ligne ne se cassera que lorsque le texte rencontrera la fin de la ligne. Si vous devez conserver l’icône à l’intérieur de la largeur du conteneur d’origine, vous pouvez append un remplissage 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 fait que la ligne se rompt lorsqu’elle rencontre le bord de l’élément parent. Par exemple, cela fonctionne:

 text goes here 

et ce n’est pas :

  text goes here  

Ceci est un peu similaire à une réponse précédente, mais je pensais que je l’étayerais et l’expliquerais pleinement.

Dès que vous définissez display: inline-block :after devient un élément sans liaison de texte. C’est pourquoi ça enveloppe, et pourquoi Nowrap n’a aucun effet. Alors laissez l’ display seul.

Comme il s’agit d’un élément de texte par défaut, le contenu se lie au texte précédent, tant qu’il n’y a pas d’espace entre eux. N’ajoutez donc rien, mais assurez-vous d’avoir du content: "" , ou la même chose que l’ display: none . Le seul problème est que la height et la width sont contrôlées par le content , qui dans ce cas est réduit. La width est donc 0 et la height est la hauteur de la ligne.

Redimensionnez la zone avec un rembourrage; à gauche ou à droite, peu importe. Ajoutez une petite margin pour que l’icône ne touche pas le texte. Gardez tout comme des tailles relatives ( em , pt , etc.) et utilisez la background-size: contain , de sorte que l’icône s’adapte au texte, comme un emoji ou une police. Positionnez enfin l’icône à l’endroit où vous voulez avec la 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 cela a bien fonctionné dans Firefox, Chrome et iOS. Et comme l’icône rest un élément de texte, même un texte direct après sa liaison, toute ponctuation de fermeture sera également appliquée.

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

  

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

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

S’il vous plaît assurez-vous de terminer le tag avant

  

Essayez le css ci-dessous. Au lieu d’utiliser “after”, utilisez “before” et flotter à droite.

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

S’il vous plaît vérifier ceci: http://jsfiddle.net/supriti/atcJJ/7/

Il est possible de le faire sans :after . L’élément avec arrière-plan doit être display:inline .

 

I want the icon to stay on the same line as this last word

h1 span { padding-right: 24px; background: url('icon.svg') no-repeat right top; }

http://jsfiddle.net/my97k7b1/

Je tentais cela avec un bouton de lien et j’ai eu le plus de succès en ajoutant un remplissage à la droite de l’élément, comme suggéré par @Hugo Silva, puis en définissant la valeur :: after sur la position absolue. C’était une solution assez simple et semblait fonctionner avec les navigateurs modernes.

 .button { position: relative; color: #F00; font-size: 1.5rem; padding-right: 2.25rem; } .button::after { content: '>>'; display: inline-block; padding-left: .75rem; position: absolute; } 

Voici un violon JS.