Verhindern: Nach dem Umbruch des Elements in die nächste Zeile

Ich habe diesen 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>

Ich füge ein Symbol mit dem: after-Pseudoelement hinzu:

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

Das Problem: Wenn die verfügbare Breite zu klein ist, wird das Symbol in die nächste Zeile umgebrochen. Ich möchte, dass es in derselben Zeile bleibt wie das letzte Wort des Links, an den es angehängt ist:

Ist dies machbar, ohne dem gesamten Link 'nowrap' hinzuzufügen (ich möchte, dass die Wörter umbrochen werden, nur nicht das Symbol).

Siehe jsFiddle hier .

Sie können das Bild stattdessen zum letzten Wort hinzufügen. das wird es zusammen brechen lassen.

Fügen Sie dem Wort eine Klasse hinzu <strong class="test">word</strong>

und .test:after { ...

http://jsfiddle.net/52dkR/

Der Trick besteht auch darin, diese Klasse zu machen inline-block

und wenn Sie die Unterstreichung beibehalten möchten, sehen Sie dies.

http://jsfiddle.net/atcJJ/

hinzufügen text-decoration:inherit;

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

Fügen Sie dem Pseudoelement einen negativen Rand hinzu, um seine Breite zu kompensieren:

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

Dadurch läuft das Symbol über den Container und die Zeile wird nur unterbrochen, wenn der Text das Zeilenende erreicht. Wenn Sie das Symbol innerhalb der ursprünglichen Behälterbreite beibehalten müssen, können Sie Polster hinzufügen, um dies erneut zu kompensieren:

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

WICHTIGES UPDATE:

Damit diese Methode funktioniert, darf zwischen dem Text und dem schließenden Tag des Elements, das das Pseudoelement enthält, kein Leerraum sein. Obwohl die Breite des Pseudoelements durch einen negativen Rand kompensiert wird, führt der Leerraum dazu, dass die Linie unterbrochen wird, wenn sie auf die Kante des übergeordneten Elements trifft. Zum Beispiel funktioniert dies:

<span>text goes here</span>

und das nicht :

<span>
    text goes here
</span>

Dies ähnelt ein wenig einer früheren Antwort, aber ich dachte, ich würde es ausarbeiten und es vollständig erklären.

Sobald Sie festlegen display: inline-block, :afterwird ein nicht textbindendes Element. Dies ist der Grund, warum es umhüllt und warum Nowrap keine Wirkung hat. Also lass es in displayRuhe.

Da es sich standardmäßig um ein Textelement handelt, wird der Inhalt an den vorherigen Text gebunden, sofern kein Leerzeichen zwischen ihnen vorhanden ist. Fügen Sie also keine hinzu, aber stellen Sie sicher, dass Sie welche haben content: "", oder es ist dasselbe wie display: none. Das einzige Problem ist heightund widthwird von der gesteuert content, die in diesem Fall zusammengebrochen ist. So widthist 0und heightist die Linienhöhe.

Ändern Sie die Größe des Bereichs mit Polsterung. links oder rechts spielt es keine Rolle. Fügen Sie ein wenig hinzu, margindamit das Symbol den Text nicht berührt. Halten Sie alles als relative Größen ( em, ptusw.) und die Verwendung background-size: contain, so dass das Symbol Waage mit dem Text, wie ein Emoji oder Schriftart. Positionieren Sie schließlich das Symbol an der gewünschten Stelle 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 */
}

Ich habe dies für meine externen Links verwendet (a[href*="://"]:after ) verwendet und es hat in Firefox, Chrome und iOS einwandfrei funktioniert. Und da das Symbol ein Textelement bleibt, wird auch direkter Text nach dem Binden eingefügt, sodass auch jede schließende Interpunktion umbrochen wird.

Ich hatte das gleiche Problem. Die Idee, dem letzten Wort starke oder span-Tags hinzuzufügen, hat mir nicht wirklich gefallen, deshalb habe ich versucht, das Symbol einfach als Hintergrundbild mit einem Auffüllrecht hinzuzufügen, anstatt die Pseudo-Elemente: after oder: before zu verwenden. Hat für mich gearbeitet!

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

Bei Verwendung einer Symbolschriftart: Verwenden des Unicodes "Nicht unterbrechender Leerzeichen" \00a0 zusammen mit dem Pseudoelementinhalt (in diesem Fall eine Glyphe "Font Awesome").

Dies funktioniert ohne zusätzliche Markierungen oder spezielle Formatierungen oder Klassennamen.

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

Das line-height: 0; Teil verhindert, dass die Linien zucken, wenn das letzte Wort + Symbol umbrochen wird.

CodePen-Beispiel

Bitte stellen Sie sicher, dass Sie das Tag vorher beenden

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

Versuchen Sie das folgende CSS. Anstatt "nach" zu verwenden, verwenden Sie "vor" und schweben Sie nach rechts.

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

Bitte überprüfen Sie dies: http://jsfiddle.net/supriti/atcJJ/7/

Es ist möglich, darauf zu verzichten :after. Das Element mit Hintergrund sollte sein 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/

Ich habe dies mit einem Link-Button versucht und hatte den größten Erfolg damit, rechts neben dem Element einen Abstand hinzuzufügen, wie von @Hugo Silva vorgeschlagen, und dann das :: after auf die absolute Position zu setzen. Dies war eine ziemlich einfache Lösung und schien in modernen Browsern zu funktionieren.

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

Hier ist eine JS-Geige.

Das Problem tritt auf, wenn am Ende des Textes des Elements ein Leerzeichen steht, sodass das Symbol als ein anderes Wort betrachtet wird. Meine Lösung besteht darin, den Leerraum mit Javascript zu entfernen und außerhalb des Elements zu platzieren. Auf diese Weise vermeiden wir auch, dass text-decoration:underlineder Leerraum am Ende eines Links formatiert wird:

$(document).ready(function () {
  $("a[href$=\".pdf\"]").each(function () {
    var endspace = /\s$/;
    if (endspace.test($(this).html())) {
      var linktx = $(this).html().replace(/\s*$/, "");
      $(this).html(linktx);
      $(this).after(" ");
    }
  });
});

In der CSS füge ich \00A0vor dem Symbol ein nicht unterbrechendes Leerzeichen hinzu , um es vom Text zu trennen und entsprechend der Schriftgröße zu skalieren. In einigen Fällen bietet die Verwendung eines engen No-Break- \202FBereichs einen besseren visuellen Effekt:

a[href$=".pdf"]:after {
  content: "\00A0\f1c1";
  font-family: "Font Awesome 5 Pro";
}

https://jsfiddle.net/poselab/910bw7zt/8/

Bei meiner speziellen Einrichtung bestand die einzige funktionierende Lösung darin, die Position relativ zu verwenden und mein Symbolelement in einem Bereich mit einer absoluten Position zu platzieren. Wie so:

h2 a {
            position: relative;
            width: auto;
}
h2 a span {
            position: absolute;
            right: -30px;
            bottom: 0;
 }

<h2>
    <a href="#">
            The arrow won't drop to the next line as an orphan, even if the text is long and responsive
         <span>&#8594;</span>
    </a>
</h2>