Wie Sie verhindern, dass Zeilenumbrüche in der Listen-Elemente mit CSS

Ich versuche einen link namens Submit resume in ein Menü mit einem li tag. Wegen dem Leerzeichen zwischen den beiden Worten, es wickelt sich an zwei Linien. Wie um zu verhindern, dass dieser Umbruch mit CSS?

InformationsquelleAutor Rajasekar | 2009-09-05

  1. 904

    Verwenden white-space: nowrap;Eins, oder geben Sie das link-mehr Platz durch die Einstellung li's Breite, um größere Werte.

    Sollten Sie auf W3C statt, die gefürchtete und oft falsche w3schools-website. w3.org/TR/css3-text/#white-space0
    Oder einfach nur Referenz Mozilla Developer Network developer.mozilla.org/en-US/docs/CSS/CSS_Reference
    Ich verhindert Zeilenumbruch in li-Elemente mit display: inline;. Vielleicht werden auch andere mit ähnlichen Problemen helfen.
    Seine wichtig, vorsichtig zu sein mit display: inline können Nebenwirkungen haben. white-space: nowrap; hat nur der eine Effekt.
    In diesem Fall text-overflow passiert. wie um zu verhindern, dass?

    InformationsquelleAutor n1313

  2. 142

    Könnte man hinzufügen, dieses kleine code-snippet, fügen Sie eine nette"...", um das Ende der Zeile, wenn der Inhalt zu groß, um auf eine Zeile passen:

    li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
    Ich war auf der Suche nach einem text-Klemm-Lösung, aber ich bleibe bei dieser Lösung

    InformationsquelleAutor JimmyRare

  3. 32

    Wenn Sie erreichen wollen, dies selektiv (z.B. nur für die bestimmten link), können Sie ein geschütztes Leerzeichen statt eines normalen Raumes:

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

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

    edit: ich verstehe, dass dies ist HTML, nicht CSS wie gewünscht durch die OP, aber einige finden es vielleicht hilfreich...

    InformationsquelleAutor ptim

  4. 8

    display: inline-block; wird verhindern, dass Zeilenumbrüche in der Liste Elemente

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

     li{
    display: inline-block;
 }
    Wenn ich durch das klicken auf die jsfiddle und passen Sie die Breite der Ausgabe, die die einzelnen Listenelemente Pause zwischen dem Wort "Liste" und die Zahl, die ist genau das, was der OP nicht wollen...

    InformationsquelleAutor Nadeesh Peiris

  5. 1

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

    Ich würde es vorziehen, zu vermeiden, empfehlen die Verwendung von Bootstrap in 2019.
    Warum?

    InformationsquelleAutor Yevgeniy Afanasyev

Schreibe einen Kommentar