So verhindern Sie Zeilenumbrüche in Listenelementen mithilfe von CSS

513

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?

html css word-wrap Rajasekar
quelle

Antworten:

969

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

n1313
quelle
41
Sie sollten auf W3C anstatt auf diese gefürchtete und oft falsche Website von w3schools verweisen. w3.org/TR/css3-text/#white-space0
Sebastien Martin
53
Oder verweisen Sie einfach auf Mozilla Developers Network developer.mozilla.org/en-US/docs/CSS/CSS_Reference
Chris Esplin
4
Ich habe Zeilenumbrüche in Li-Artikeln mit verhindert display: inline;. Vielleicht hilft dies auch anderen bei ähnlichen Problemen.
Es ist wichtig, vorsichtig mit dem Display umzugehen: Inline, da es Nebenwirkungen haben kann. Leerraum: Nowrap; hat nur den einen Effekt.
Crispen Smith
In diesem Fall tritt ein Textüberlauf auf. wie kann man das verhindern?
147

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;
}
JimmyRare
quelle
Ich suchte nach einer
Textklemmlösung
33

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

ptim
quelle
14

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

 li {
    display: inline-block;
 }
Nadeesh Peiris
quelle
1
Wenn ich mich zur jsfiddle durchklicke und die Breite der Ausgabe anpasse, brechen die einzelnen Listenelemente zwischen dem Wort "Liste" und der Zahl, was genau das ist, was das OP nicht will ...
GentlePurpleRain
4

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

Jewgenij Afanasjew
quelle
2
Ich würde es vorziehen, die Verwendung von Bootstrap im Jahr 2019 zu vermeiden.
Broda Noel
2
@BrodaNoel Warum?
Jewgenij Afanasjew