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

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.

Versuche dies:

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

Verwenden white-space:nowrap und overflow:hidden

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

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

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

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.

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.

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/