So verhindern Sie Zeilenumbrüche in Listenelementen mithilfe von CSS

Ich versuche, einen Link mit dem Namen " Lebenslauf senden" mithilfe eines liTags in ein Menü einzufügen. Aufgrund des Leerzeichens zwischen den beiden Wörtern wird es in zwei Zeilen eingeschlossen. Wie kann dieser Umbruch mit CSS verhindert werden?

Verwenden Sie white-space: nowrap;^{[1] [2]} oder geben Sie diesem Link mehr Platz, indem Sie die liBreite auf größere Werte einstellen .

^[1] § 3. Leerraum und Umbruch: die Leerraum-Eigenschaft - W3 CSS-Textmodul Stufe 3
^[2] Leerraum - CSS: Cascading Style Sheets | MDN

Sie können diesen kleinen Codeausschnitt hinzufügen, um dem Ende der Zeile ein schönes "..." hinzuzufügen, wenn der Inhalt zu groß ist, um in eine Zeile zu passen:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

Wenn Sie dies selektiv erreichen möchten (dh nur zu diesem bestimmten Link), können Sie anstelle eines normalen Leerzeichens ein nicht unterbrechendes Leerzeichen verwenden:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

Bearbeiten: Ich verstehe, dass dies HTML ist, nicht CSS, wie vom OP angefordert, aber einige mögen es hilfreich finden ...

Anzeige: Inline-Block; verhindert eine Unterbrechung zwischen den Wörtern in einem Listenelement

 li {
    display: inline-block;
 }

Bootstrap 4 hat eine Klasse namens text-nowrap. Es ist genau das, was Sie brauchen.