HTML + CSS: como forçar o conteúdo div a permanecer em uma linha?

Eu tenho um texto longo dentro de um divcom definidowidth :

HTML:

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

CSS:

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

Como eu poderia forçar a corda a permanecer em uma linha (ou seja, ser cortada no meio de "Estouro")?

Eu tentei usar overflow: hidden, mas não ajudou.

Tente o seguinte:

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

Use white-space:nowrapeoverflow:hidden

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

no seu uso de css white-space:nowrap;

Seu código HTML: <div>Stack Overflow is the BEST !!!</div>

CSS:

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

Agora o resultado deve ser:

Pilha Overf ...

Todo mundo pulou nessa !!! Eu também fiz um violino:

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

RobAgar ganha um ponto para apontar white-space:nowrapprimeiro.

Algumas coisas aqui são necessárias, overflow: hiddense você não quiser ver os caracteres extras aparecendo em seu layout.

Além disso, como mencionado, você pode usar white-space: pre(consulte o EnderMB) tendo em mente que preo espaço em branco não será recolhido white-space: nowrap.

Faça uma tentativa. Ele usa pree não nowrapcomo eu diria que você gostaria que isso funcionasse da mesma forma, <pre>mas também funcionará bem:

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

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

Eu pulei aqui procurando a mesma coisa, mas nenhuma funcionou para mim.

Há casos em que, independentemente do que você faz, e dependendo do sistema (Oracle Designer: Oracle 11g - PL / SQL), divs sempre passa para a próxima linha; nesse caso, você deve usar a tag span.

Isso fez maravilhas para mim.

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

adicione isso ao seu div

white-space: nowrap;

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

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

foi a solução que funcionou para mim. Em alguns casos com div-lists isso é necessário.

alguns valores de direção alternativos são row-reverse, column, column-reverse, unset, initial, inherit os que você espera que eles façam

Tente definir uma altura para que o bloco não possa crescer para acomodar seu texto e mantenha o overflow: hiddenparâmetro

EDIT: Aqui está um exemplo do que você pode gostar se precisar exibir duas linhas de altura:

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