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

Lesezeit: 2 Minuten

Wie kann man div Inhalte dazu zwingen mit HTML und CSS
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

Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Bazz

Versuche dies:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

  • Betreff “Versuche dies”: Eine Erklärung wäre angebracht. ZB, was ist die Idee/der Kern? Aus dem Hilfecenter: “…erklären Sie immer, warum die von Ihnen vorgestellte Lösung angemessen ist und wie sie funktioniert”. Bitte antworten Sie, indem Sie Ihre Antwort bearbeiten (ändern), nicht hier in den Kommentaren (ohne “Bearbeiten:”, “Aktualisieren:” oder ähnliches – die Antwort sollte so aussehen, als wäre sie heute geschrieben).

    – Peter Mortensen

    27. Februar um 4:03 Uhr

Verwenden white-space:nowrap und overflow:hidden

http://jsfiddle.net/NXchy/8/

  • Addieren 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

Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Rob Agar

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

1647207127 756 Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Bozlur Rahman

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

1647207127 654 Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Marc Audet

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.

1647207127 524 Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Peter Mortensen

div {
    display: flex;
    flex-direction: row;
}

war die Lösung, die für mich funktioniert hat. Teilweise mit div-Listen, dies wird benötigt.

Einige alternative Richtungswerte sind row-reverse, column, column-reverse, unset, initialund inherit. Die die Dinge tun, die Sie von ihnen erwarten.

1647207127 524 Wie kann man div Inhalte dazu zwingen mit HTML und CSS
Peter Mortensen

Probieren Sie es aus. Es benutzt pre eher, als nowrap da ich davon ausgehen würde, dass Sie möchten, dass dies ähnlich läuft <pre>aber beide werden gut funktionieren:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space: pre;
}

http://jsfiddle.net/NXchy/11/

999080cookie-checkWie kann man 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