empêche: après l'élément de passer à la ligne suivante
J'ai ce code 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 passe à la ligne suivante. Je voudrais qu'il reste sur la même ligne que le dernier mot du lien auquel il est ajouté:
Est-ce faisable, sans ajouter "nowrap" au lien entier (je veux que les mots soient bouclés, mais pas l'icône).
Voir jsFiddle ici .
vous pouvez ajouter l'image au dernier mot à la place. cela le fera casser ensemble.
ajouter une classe à Word <strong class="test">Word</strong>
et .test:after { ...
le truc est aussi de faire que cette classe soit inline-block
et si vous voulez garder le soulignement, voyez ceci.
ajouter 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;
}
Désormais, l'icône va déborder du conteneur et la ligne ne sera interrompue que lorsque le texte aura atteint la fin de la ligne. Si vous devez conserver l'icône dans la largeur du conteneur d'origine, vous pouvez ajouter 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 coupera la ligne lorsqu'elle rencontrera le bord de l'élément parent. Par exemple, cela fonctionne:
<span>text goes here</span>
et ceci ne:
<span>
text goes here
</span>
Ceci est un peu similaire à une réponse précédente, mais je pensais que je pourrais l'expliquer et l'expliquer complètement.
Dès que vous définissez display: inline-block, :after devient un élément non lié au texte. C’est pourquoi il encapsule et pourquoi nowrap n’a aucun effet. Alors laissez display seul.
Comme il s'agit d'un élément de texte par défaut, le contenu est lié au texte précédent, à condition qu'il n'y ait pas d'espace entre eux. Donc, n’ajoutez rien, mais assurez-vous que vous avez bien content: "", sinon c'est la même chose que display: none. Le seul problème est que height et width sont contrôlés par la content, qui dans ce cas est réduite. Donc, width est 0 et height est la hauteur de la ligne.
Redimensionnez la zone avec un rembourrage. à gauche ou à droite, peu importe. Ajoutez un peu margin pour que l’icône ne touche pas le texte. Conservez tout comme des tailles relatives (em, pt, etc.) et utilisez background-size: contain pour que l’icône s’adapte au texte, comme un emoji ou une police. Enfin, placez 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 cela a bien fonctionné sous Firefox, Chrome et iOS. Et comme l'icône reste un élément de texte, même le texte direct après sa liaison, toute ponctuation de fermeture sera renvoyée à la ligne.
J'avais le même problème. Je n’aimais pas vraiment l’idée d’ajouter des balises fortes ou étendues au dernier Word, aussi j’ai essayé d’ajouter simplement l’icône en tant qu’image d’arrière-plan avec une marge de frappe droite au lieu d’utiliser les pseudo-éléments: after ou: before. Travaillé 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;
}
Assurez-vous de terminer le tag avant </ li>
<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>Word</strong></a></li></ul>
Essayez le css ci-dessous. Au lieu d'utiliser "après", utilisez "avant" et flottez à droite.
ul li.completed a:before {
background:transparent url(img1.png) no-repeat;
content: '';
display:inline-block;
width: 24px;
height: 16px;
float:right;
}
Veuillez vérifier ceci: http://jsfiddle.net/supriti/atcJJ/7/
J'essayais cela avec un bouton de lien et j'ai eu le plus de succès en ajoutant un rembourrage à la droite de l'élément, comme @Hugo Silva l'avait suggéré, puis en définissant le paramètre :: after sur une position absolue. C'était une solution assez simple et qui 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;
}
Il est possible de le faire sans :after. L'élément avec le fond devrait être display:inline.
<h1><span>I want the icon to stay on the same line as this last Word</span></h1>
h1 span {
padding-right: 24px;
background: url('icon.svg') no-repeat right top;
}
Si vous utilisez une police d'icônes: Utilisez le "unicode \00a0" avec "contenu insécable" avec le contenu du pseudo-élément (dans ce cas, un glyphe Font Awesome).
Cela fonctionne sans annotation 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;
}
La partie line-height: 0; empêche les lignes de se contracter lorsque le dernier 'Word + icon' est renvoyé à la ligne.