Wie kann ich verhindern, dass nur ein Wort in einer neuen Zeile in einem HTML-Element hängen bleibt?

Question

Ich baue eine einfache Webseite mit einigen Marketing-Inhalten. Eine Sache, die ich nicht mag, ist, dass, wenn eine Textzeile zu lang ist, sie in die nächste Zeile, fein, wickelt, aber es oft so umschließt, dass es nur ein Wort auf der neuen Zeile gibt , was vom Design her nur eine schlechte Nachricht ist.

Solche und solche müssen nicht schwierig sein. Solch ein Produkt macht es
einfach

Was kann ich tun, um dynamisch mindestens zwei Wörter auf jeder hängenden Linie zu gewährleisten?

Solche und solche müssen nicht schwierig sein. Solche und solches Produkt macht
es leicht

Answer 1

Die einfache Lösung ist am Ende eines Absatzes einen non-breaking Raum zwischen den beiden letzten Worte zu benutzen.

  

---

<p>Such and such doesn't have to be difficult. Such and such product makes it&nbsp;easy</p> 

Diese mühsame bekommen könnte, wenn Sie eine Menge Inhalt haben und vor allem, wenn es Unternehmen gesteuert. In diesem Fall können Sie möglicherweise eine Bibliothek finden oder eine Lösung schreiben, die automatisch den geschützten Bereich zwischen den letzten beiden Wörtern jedes Absatzes für Sie einfügt.

Versuchen Sie folgendes: http://matthewlein.com/widowfix/

Answer 2

EDIT: Die best answer ist viel sauberer - Sie wahrscheinlich, dass stattdessen verwenden sollten. Ich lasse meine Antwort, weil es funktioniert und es hat einen Wert für seltsame Fälle (z. B. wenn Sie einen Bindestrich anstelle eines Leerzeichens verwenden, wenn Sie nicht   usw. verwenden möchten).

---

Hier ist eine nette kleine Lösung. Erstellen Sie eine CSS-Klasse wie folgt aus:

.nobr { white-space:nowrap; } 

Jedes Element mit der Klasse „nobr“ nicht zu wickeln weiß-Raum zugelassen werden (Leerzeichen, Tabulatoren, etc.) auf neuen Linien. Umranden Sie einfach die letzten beiden Wörter Ihres Textes mit einer span.nobr.

<p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>