prévenir :après l'élément d'habillage à 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>

Je suis ajoutant une icône à l'aide de l' :après le pseudo-élément:

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 faible, l'icône passe à la ligne suivante. J'ai envie de rester sur la même ligne que le dernier mot du lien il est annexé:

prévenir :après l'élément d'habillage à la ligne suivante

Est-ce faisable, sans ajout de 'nowrap' pour le lien (je veux les paroles de wrap, tout simplement pas l'icône).

Voir jsFiddle ici.

  • Pourriez-vous modifier le HTML? Ou êtes-vous coincé avec elle?
  • Oui, je peux modifier le code HTML..
InformationsquelleAutor ptriek | 2013-04-19
  1. 10

    vous pouvez ajouter l'image à la parole en dernier lieu. qui permettra de faire pause ensemble.

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

    et .test:after { ...

    http://jsfiddle.net/52dkR/

    l'astuce consiste aussi à faire de cette classe à être inline-block

    et si vous voulez garder le soulignement de voir cela.

    http://jsfiddle.net/atcJJ/

    ajouter text-decoration:inherit;

    • Je ne pense pas qu'il y aura toujours le dernier mot dans un élément fort.
    • merveilleux, fonctionne comme un charme, en effet... @HerrSerker l'élément fort était juste pour plus de clarté, j'ai inséré un <span class="icon"> à chaque dernier mot, et ajouté l'icône de cette span
    • j'ai fait l'élément fort dans la durée de la deuxième jsfiddle ainsi. j'ai pensé que c'était pour des raisons de clarté.
    • J'ai essayé cela, il prend l'élément de la 2e ligne lorsque le mot enveloppements. Comment cela fonctionne? jsfiddle.net/supriti/atcJJ/5
    • display: inline-block astuce a fonctionné pour moi, en y ajoutant le dernier mot aurait été très compliqué étant donné que le contenu est généré automatiquement, basée sur les données provenant de la base de données.
    • Cette réponse n'est pas assez générale. Vous vous attendez à une balise HTML spécifique à toujours être là où vous voulez qu'il soit.

    InformationsquelleAutor btevfik
  2. 76

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

    Ajouter une marge négative de la 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, que va faire l'icône de dépassement de capacité du conteneur et de la ligne va briser uniquement lorsque le texte répondre à la fin de la ligne. Si vous avez besoin de maintenir l'icône à l'intérieur de l'emballage d'origine de la largeur, vous pouvez ajouter un rembourrage pour compenser nouveau:

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

    MISE À JOUR IMPORTANTE:

    Pour que cette méthode fonctionne, il doit y avoir aucun espace entre le texte et la balise fermante de l'élément de la tenue de la pseudo-élément. Même si le pseudo élément de largeur est compensée par une marge négative, l'espace blanc qui va faire le saut de ligne quand il rencontre le bord de l'élément parent. Par exemple, cela fonctionne:

    <span>text goes here</span>

    et ce n'est pas:

    <span>
    text goes here
</span>
    • C'est la solution la plus élégante à mon avis, car il n'y a aucun balisage nécessaire. Ma seule plainte est que toute l'espacement souhaité entre l'icône et le texte doit être ajouté à l'image, de la marge/rembourrage ne fonctionne pas.
    • c'est la voie à suivre lorsque vous traitez avec des cellules de tableau (où la largeur de la colonne est déterminée au moment de l'affichage)
    • si vous faites une largeur plus grande, vous pouvez changer l'arrière-plan de l'emplacement. Donc width:26px; et 2px 0 comme arrière-plan à la position de la déplacer. jsfiddle.net/Bk38F/23
    • Vous POUVEZ utiliser de la marge pour faire de la place entre l'icône et le texte. Utiliser le pseudo de la marge de gauche pour faire de l'espace, et de faire sa négative de la marge de droite de la somme de la largeur et de la marge de gauche: { width: 24px; margin-left: 10px; margin-right: -34px }
    • Cette solution ne fonctionne pas. Au moins dans google Chrome, je peux encore trouver des tailles d'écran où l'icône de l'enveloppe avant le dernier mot. Qui ne se fait pas si souvent avec cette solution mais c'est encore possible.
    • s'il vous plaît vérifier la mise à jour de réponse
    • Semble fonctionner maintenant. Avez-vous mise à jour le violon ainsi? J'ai essayé de la faire et j'ai été en mesure de définir les tailles d'écran lors de l'icône enveloppé avant le texte.

    InformationsquelleAutor Hugo Silva
  3. 7

    C'est un peu similaire à une précédente réponse, mais j'ai pensé que j'avais la chair et de l'expliquer entièrement.

    Dès que vous mettez display: inline-block, :after devient un non-texte-élément de liaison. C'est pourquoi il s'enroule, et pourquoi nowrap n'a aucun effet. Laissez donc display seul.

    Que c'est un élément de texte par défaut, le contenu se lie à un texte précédent, tant qu'il n'y a pas d'espace entre eux. Afin de ne pas ajouter, mais assurez-vous d'avoir content: "", ou c'est le même que display: none. Le seul problème est height et width sont contrôlés par le content, qui dans ce cas est effondré. Donc width est 0, et height est la hauteur de la ligne.

    Redimensionner la zone avec un rembourrage; à gauche ou à droite, il n'a pas d'importance. Ajouter un peu de margin si l'icône ne touche pas le texte. Garder tout aussi tailles relatives (em, pt, etc.), et l'utilisation background-size: contain, de sorte que l'icône de la balance avec le texte, comme un emoji ou de la police. Enfin, la position de 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 */
}

    J'ai utilisé pour mes liens externes (a[href*="://"]:after), et ça a bien fonctionné dans Firefox, Chrome et iOS. Et depuis l'icône reste un élément de texte, même texte direct après il se lie, de sorte que toute la fermeture de la ponctuation envelopper trop.

    • Cela fonctionne très bien pour :after. Une idée de comment le faire fonctionner pour :before ainsi?
    InformationsquelleAutor Phernost
  4. 5

    J'ai eu le même problème. Je n'ai pas vraiment aimé l'idée d'ajouter des solides ou des balises span pour le dernier mot, alors j'ai tout simplement essayé de l'ajout de l'icône de l'image d'arrière-plan avec quelques padding-right au lieu de l'aide de l' :après ou :avant de pseudo-éléments. A fonctionné 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/

    InformationsquelleAutor Jason
  5. 3

    Assurez-vous de la fin de la balise avant de 

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

    Essayer le css ci-dessous. Au lieu d'utiliser "après" utilisation "avant" et un flotteur droit.

    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/

    InformationsquelleAutor Supriti Panda
  6. 3

    J'ai été de tenter cela avec un bouton de lien et a eu le plus de succès avec l'ajout de remplissage vers la droite de l'élément @Hugo Silva a suggéré, alors la configuration de l' ::après de position absolue. C'était un joli solution simple et semble fonctionner dans 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 JS Fiddle.

    InformationsquelleAutor Mary7678
  7. 3

    Si à l'aide d'une icône de la police: à l'Aide de la "espace insécable" unicode \00a0 avec le pseudo-élément de contenu (dans ce cas, une Police Génial glyphe).

    Cela fonctionne sans aucun supplément de mark-up ou une mise en forme spéciale ou les noms de classe.

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

    La line-height: 0; partie garde les lignes de secousses lorsque le dernier "mot + icône" wrap.

    CodePen exemple

    InformationsquelleAutor Jase
  8. 2

    Il est possible de le faire sans :after.
    L'élément d'arrière-plan doit ê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; 
}

    http://jsfiddle.net/my97k7b1/

    InformationsquelleAutor Svyat P.