HTML + CSS: Bagaimana cara memaksa konten div untuk tetap dalam satu baris?

Saya memiliki teks panjang di dalam divdengan didefinisikanwidth :

HTML:

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

CSS:

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

Bagaimana saya bisa memaksa string untuk tetap dalam satu baris (yaitu harus dipotong di tengah "Overflow")?

Saya mencoba menggunakan overflow: hidden, tetapi tidak membantu.

Coba ini:

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

Gunakan white-space:nowrapdanoverflow:hidden

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

dalam penggunaan css Anda white-space:nowrap;

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

CSS:

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

Sekarang hasilnya harus:

Stack Overf ...

Semuanya melompat untuk yang ini !!! Saya juga membuat biola:

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

RobAgar punya poin untuk menunjukkan white-space:nowrapterlebih dahulu.

Beberapa hal di sini, Anda perlu overflow: hiddenjika Anda tidak ingin melihat karakter tambahan mencuat ke tata letak Anda.

Juga, seperti yang disebutkan, Anda dapat menggunakan white-space: pre(lihat EnderMB) dengan mengingat bahwa pretidak akan menciutkan ruang putih sedangkan white-space: nowrapakan.

Cobalah ini. Ini menggunakan predaripada nowrapseperti yang saya asumsikan Anda ingin ini berjalan mirip <pre>tetapi keduanya akan bekerja dengan baik:

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

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

Saya melompat ke sini mencari hal yang sama, tetapi tidak ada yang berhasil untuk saya.

Ada contoh di mana terlepas dari apa yang Anda lakukan, dan tergantung pada sistem (Oracle Designer: Oracle 11g - PL / SQL), divs akan selalu pergi ke baris berikutnya, dalam hal ini Anda harus menggunakan tag rentang sebagai gantinya.

Ini berhasil bagi saya.

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

tambahkan ini ke div Anda

white-space: nowrap;

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

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

adalah solusi yang berhasil untuk saya. Dalam beberapa kasus dengan div-lists, ini diperlukan.

beberapa nilai arah alternatif adalah row-reverse, column, column-reverse, unset, initial, inherit yang melakukan hal-hal yang Anda harapkan

Coba atur ketinggian agar blok tidak dapat tumbuh untuk mengakomodasi teks Anda, dan simpan overflow: hiddenparameternya

EDIT: Berikut adalah contoh dari apa yang Anda sukai jika Anda perlu menampilkan 2 baris tinggi:

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