HTML + CSS: come forzare i contenuti div a rimanere su una riga?

Ho un lungo testo all'interno di a divcon definitowidth :

HTML:

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

CSS:

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

Come potrei forzare la stringa a rimanere su una riga (cioè essere tagliata nel mezzo di "Overflow")?

Ho provato a usare overflow: hidden, ma non ha aiutato.

Prova questo:

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

Usa white-space:nowrapeoverflow:hidden

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

nel tuo uso css white-space:nowrap;

Il tuo codice HTML: <div>Stack Overflow is the BEST !!!</div>

CSS:

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

Ora il risultato dovrebbe essere:

Stack Overf ...

Tutti hanno saltato su questo !!! Anch'io ho fatto un violino:

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

RobAgar ottiene un punto per sottolineare white-space:nowrapprima.

Un paio di cose qui, è necessario overflow: hiddense non vuoi vedere i personaggi extra che spuntano nel tuo layout.

Inoltre, come detto, potresti usare white-space: pre(vedi EnderMB) tenendo presente che prenon crollerà lo spazio bianco mentre lo white-space: nowrapfarà.

Prova questo. Usa prepiuttosto che nowrapcome suppongo che vorresti che funzionasse in modo simile <pre>ma funzionerà bene:

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

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

Sono saltato qui cercando la stessa cosa, ma nessuno ha funzionato per me.

Ci sono casi in cui indipendentemente da ciò che fai e in base al sistema (Oracle Designer: Oracle 11g - PL / SQL), i div andranno sempre alla riga successiva, nel qual caso dovresti usare invece il tag span.

Questo ha funzionato a meraviglia per me.

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

aggiungi questo al tuo div

white-space: nowrap;

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

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

è stata la soluzione che ha funzionato per me. In alcuni casi con divliste è necessario.

alcuni valori di direzione alternativi sono quelli row-reverse, column, column-reverse, unset, initial, inherit che fanno le cose che ti aspetti che facciano

Prova a impostare un'altezza in modo che il blocco non possa crescere per contenere il testo e mantieni il overflow: hiddenparametro

EDIT: ecco un esempio di ciò che ti potrebbe piacere se hai bisogno di visualizzare 2 righe alte:

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