Wie kann ich div-Inhalte dazu zwingen, mit HTML und CSS in einer Zeile zu bleiben?

Lesezeit: 1 Minute

Benutzer-Avatar
Mischa Moroschko

Ich habe einen langen Text in a div mit definiert width:

HTML:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

Wie könnte ich die Zeichenfolge zwingen, in einer Zeile zu bleiben (dh mitten in “Overflow” geschnitten zu werden)?

Ich habe versucht zu verwenden overflow: hiddenaber es hat nichts geholfen.

  • white-space: nowrap Fügen Sie dies in Ihr Stil-Tag ein.

    – Moschi

    29. September 2016 um 13:19 Uhr

Benutzer-Avatar
stephenmurdoch

Fügen Sie dies zu Ihrem div hinzu:

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

  • Sie können hinzufügen: overflow: auto um eine horizontale Bildlaufleiste anzuzeigen

    – Sarah Westen

    8. März 2011 um 12:21 Uhr

  • Hinzufügen text-overflow:ellipsis; nach oben für besseres Aussehen.

    – tj-Aussparung

    19. Januar 2016 um 22:50 Uhr

  • kann dies ohne css erreicht werden?

    – Nilon

    24. Juli 2017 um 19:07 Uhr

Benutzer-Avatar
Rob Agar

Verwenden Sie in Ihrem CSS-Abschnitt white-space: nowrap;.

Benutzer-Avatar
Peter Mortensen

Ihr HTML-Code:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Nun sollte das Ergebnis lauten:

Stack Overf...

Benutzer-Avatar
Peter Mortensen

Ich habe eine Geige gemacht:

http://jsfiddle.net/audetwebdesign/kh4aR/

betonte RobAgar white-space:nowrap.

Ein paar Dinge hier: Sie brauchen overflow: hidden wenn Sie nicht möchten, dass die zusätzlichen Zeichen in Ihrem Layout herausragen.

Auch, wie erwähnt, könnten Sie verwenden white-space: pre (siehe EnderMB), das im Hinterkopf behalten pre wird den weißen Raum nicht zusammenbrechen white-space: nowrap Wille.

1006000cookie-checkWie kann ich div-Inhalte dazu zwingen, mit HTML und CSS in einer Zeile zu bleiben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy