HTML + CSS: Div içeriklerini bir satırda kalmaya nasıl zorlarım?

İçinde uzun bir metin divile tanımlanmışwidth :

HTML:

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

CSS:

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

Dizeyi bir satırda kalmaya nasıl zorlayabilirim (yani "Taşma" nın ortasında kesilecek)?

Kullanmaya çalıştım overflow: hidden, ama yardımcı olmadı.

Bunu dene:

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

Kullan white-space:nowrapveoverflow:hidden

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

css kullanımında white-space:nowrap;

HTML kodunuz: <div>Stack Overflow is the BEST !!!</div>

CSS:

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

Şimdi sonuç şöyle olmalıdır:

Yığın Aşırı ...

Herkes buna atladı !!! Ben de bir keman yaptım:

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

RobAgar white-space:nowrapönce dikkat çekmek için bir puan alır .

Burada birkaç şey overflow: hidden, düzeninize atılan ekstra karakterleri görmek istemiyorsanız gerekir.

Ayrıca, belirtildiği gibi, beyaz alanı daraltmayacak şekilde white-space: preakılda tutarak (bkz. EnderMB) kullanabilirsiniz .prewhite-space: nowrap

Bunu bir deneyin. Bunun benzer şekilde çalışmasını isteyeceğinizi varsaymak preyerine kullanır nowrap, <pre>ancak her ikisi de iyi çalışır:

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

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

Aynı şeyi aramak için buraya atladım, ama hiçbiri benim için çalışmadı.

Ne yaparsanız yapın ve sisteme bağlı olarak (Oracle Designer: Oracle 11g - PL / SQL) div'ler her zaman bir sonraki satıra gider, bunun yerine span etiketini kullanmanız gerekir.

Bu benim için harikalar yarattı.

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

bunu div'inize ekle

white-space: nowrap;

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

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

benim için işe yarayan çözümdü. div-Listeleri olan bazı durumlarda buna ihtiyaç vardır.

row-reverse, column, column-reverse, unset, initial, inherit yapmasını beklediğiniz şeyleri yapan alternatif yön değerleri

Bloğun metninize uyacak şekilde büyümemesi için bir yükseklik ayarlamayı deneyin ve overflow: hiddenparametreyi koruyun

DÜZENLEME: Aşağıda, 2 satır yüksekliğinde göstermeniz gerekiyorsa beğenebileceğiniz bir örnek verilmiştir:

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