Wie man Zeilenumbrüche in Listenelementen mit CSS verhindert

Question

Ich versuche, einen Link namens Lebenslauf einreichen in einem Menü mit einem li Tag. Wegen des Leerraums zwischen den beiden Wörtern werden zwei Zeilen umgebrochen. Wie kann man diesen Umbruch mit CSS verhindern?

Answer 1

Verwenden Sie white-space: nowrap; [1] [2] oder geben Sie dem Link mehr Platz, indem Sie li Breite auf größere Werte.

---

[1] § 3. Weißraum und Umbruch: die Eigenschaft Weißraum - W3 CSS Text Module Level 3
[2] Leerzeichen - CSS: Cascading Style Sheets | MDN

Answer 2

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

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

Answer 3

Wenn Sie dies selektiv erreichen wollen (d. h. nur für diesen bestimmten Link), können Sie ein nicht umbrechendes Leerzeichen anstelle eines normalen Leerzeichens verwenden:

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

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

edit: Ich verstehe, dass dies HTML ist, nicht CSS, wie vom OP angefordert, aber einige könnten es hilfreich finden

Answer 4

display: inline-block; verhindert den Umbruch zwischen den Wörtern eines Listeneintrags:

li {
  display: inline-block;
}

Answer 5

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