it-swarm.com.de

So verhindern Sie Zeilenumbrüche in Listenelementen mit CSS

Ich versuche, einen Link namens Submit resume in ein Menü zu setzen, indem ein li-Tag verwendet wird. Wegen des Leerraums zwischen den beiden Wörtern wird es in zwei Zeilen umbrochen. Wie kann man das Wrapping mit CSS verhindern?

459
Rajasekar

Verwenden Sie white-space: nowrap;1oder geben Sie diesem Link mehr Platz, indem Sie die Breite von li auf größere Werte setzen.

892
n1313

Sie können dieses kleine Codefragment hinzufügen, um ein Nice "…" am Ende der Zeile hinzuzufügen, wenn der Inhalt zu groß ist, um in eine Zeile zu passen:

li {
  overflow: hidden; 
  text-overflow: Ellipsis;
  white-space: nowrap;
}
139
JimmyRare

Wenn Sie dies selektiv erreichen möchten (dh: nur für diesen bestimmten Link), können Sie anstelle eines normalen Leerzeichens ein Leerzeichen 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 finden es vielleicht hilfreich…

31
ptim

display: Inline-Block; verhindert Zeilenumbrüche in Listenelementen

http://jsfiddle.net/Nash171/mwe4s0nc/46/

 li{
    display: inline-block;
 }
7
Nadeesh Peiris

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

0