HTML + CSS: Wie kann man zwingen, dass div-Inhalte in einer Zeile bleiben?

Ich habe einen langen Text in einem divmit definiertemwidth :

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 in der Mitte von "Überlauf" geschnitten zu werden)?

Ich habe versucht zu verwenden overflow: hidden, aber es hat nicht geholfen.

Versuche dies:

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

Verwenden Sie white-space:nowrapundoverflow:hidden

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

in Ihrem CSS verwenden 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;
}

Jetzt sollte das Ergebnis sein:

Stack Overf ...

Alle sind auf diesen gesprungen !!! Ich habe auch eine Geige gemacht:

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

RobAgar bekommt einen Punkt, um zuerst darauf hinzuweisen white-space:nowrap.

Einige Dinge, die Sie hier benötigen, overflow: hiddenwenn Sie nicht möchten, dass die zusätzlichen Zeichen in Ihr Layout hineinragen.

Wie bereits erwähnt, können Sie auch white-space: pre(siehe EnderMB) berücksichtigen, dass der preLeerraum nicht kollabiert, während dies der Fall white-space: nowrapist.

Probieren Sie es aus. Es verwendet preeher als nowrapwie ich annehmen würde, dass Sie möchten, dass dies ähnlich abläuft, <pre>aber beides wird gut funktionieren:

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

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

Ich bin hierher gesprungen und habe nach dem gleichen gesucht, aber keiner hat für mich funktioniert.

Es gibt Fälle, in denen divs unabhängig von Ihrer Tätigkeit und je nach System (Oracle Designer: Oracle 11g - PL / SQL) immer zur nächsten Zeile wechselt. In diesem Fall sollten Sie stattdessen das span-Tag verwenden.

Das hat Wunder für mich gewirkt.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

füge dies deinem div hinzu

white-space: nowrap;

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

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

war die Lösung, die für mich funktioniert hat. In einigen Fällen mit div-lists ist dies erforderlich.

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

Versuchen Sie, eine Höhe festzulegen, damit der Block nicht an Ihren Text angepasst werden kann, und behalten Sie den overflow: hiddenParameter bei

BEARBEITEN: Hier ist ein Beispiel dafür, was Ihnen gefallen könnte, wenn Sie 2 Zeilen hoch anzeigen müssen:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}