css overflow - hanya 1 baris teks

134

Saya miliki divdengan gaya css berikut:

width:335px; float:left; overflow:hidden; padding-left:5px;

Ketika saya menyisipkan, ke dalam div, satu baris teks yang panjang, itu melanggar ke baris baru dan menampilkan semua teks. Yang saya inginkan adalah hanya memiliki satu baris teks yang tidak akan putus baris. Ketika teksnya panjang, saya ingin teks yang meluap ini menghilang.

Saya sedang berpikir tentang mengatur ketinggian tetapi tampaknya salah.

Mungkin jika saya menambah tinggi yang sama dengan font, itu harus bekerja dan tidak menimbulkan masalah di browser yang berbeda?

Bagaimana saya bisa melakukan itu?

html css overflow Home run
sumber
Bisakah Anda menunjukkan masalah Anda di jsFiddle ?
Harry Joy

Jawaban:

352

Jika Anda ingin membatasi ke satu baris, gunakan white-space: nowrap;pada div.

Septnuits
sumber
Tapi itu tidak menunjukkan elipsis jika teks melampaui dimensi yang ditentukan. stackoverflow.com/questions/26342411/...
SearchForKnowledge
Ini berhasil, bagus. Tapi saya perlu ...jika ada lebih banyak karakter untuk ditampilkan karena ketika panjang garis panjang dan keluar dari div tertulis.
Moshii
Tindakan ini aneh jika teks tersembunyi berisi tautan hiper. Jika saya menabrak halaman itu akan menyebabkan tautan dalam teks tersembunyi untuk menggulir ke layar, ketika itu harus disembunyikan.
Eric
76

Jika Anda ingin menunjukkan bahwa masih ada lebih banyak konten yang tersedia di div itu, Anda mungkin ingin menunjukkan "elipsis":

text-overflow: ellipsis;

Ini harus di samping white-space: nowrap;disarankan oleh Septnuits.

Juga, pastikan Anda memeriksa utas ini untuk menangani ini di Firefox.

Mouli
sumber
47
Saya percaya Anda harus menggunakan text-overflow: ellipsis;dengan overflow: hidden;dan white-space: nowrap;untuk membuatnya bekerja
Francisco Costa
caniuse.com/#feat=text-overflow alias. ya kamu bisa. Pertimbangkan untuk meletakkan seluruh konten dalam atribut judul, sehingga pengguna masih memiliki akses ke sana.
DanMan
tambang saya hanya ditampilkan dalam satu baris dan tidak mengisi DIV sebelum menampilkan elipsis ... stackoverflow.com/questions/26342411/ ... ( jsfiddle.net/ofrj55j4/20 )
SearchForKnowledge
43

Anda dapat menggunakan kode css ini:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

Properti text-overflow di CSS berhubungan dengan situasi di mana teks terpotong ketika meluap kotak elemen. Ia dapat dipotong (mis. Terputus, disembunyikan), menampilkan elipsis ('…', Nilai Rentang Unicode U + 2026).

Perhatikan bahwa teks-overflow hanya terjadi ketika properti overflow milik penampung memiliki nilai tersembunyi , gulir atau otomatis dan ruang-putih: nowrap; .

Teks overflow hanya dapat terjadi pada elemen level blok atau inline-blok , karena elemen tersebut harus memiliki lebar agar dapat melimpah-red. Overflow terjadi dalam arah yang ditentukan oleh properti arah atau atribut terkait.

Gaurav Tripathi
sumber
6

kode terbaik untuk UX dan UI adalah

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
Omid Ahmadyani
sumber
0

jika tambahan tolong, jika Anda memiliki teks yang panjang, harap Anda dapat menggunakan kode css ini di bawah;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

buat seluruh teks baris terlihat.

shafii muhudi
sumber
0 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Tentukan lebar juga untuk mengatur overflow dalam satu baris

Jaydeep Kataria
sumber
-2

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menggunakan:

display: inline-block;

pada divpertanyaan tersebut.

Dekcolnu
sumber