text-overflow: ellips tidak berfungsi

Inilah yang saya coba (lihat di sini ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Pada dasarnya, saya ingin rentang menyusut dengan elipsis ketika jendela dibuat kecil. Apa kesalahan yang telah aku perbuat?

Anda harus memiliki CSS overflow, width(atau max-width) display,, dan white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Tambahan Jika Anda ingin gambaran umum teknik melakukan penjepitan garis (Multiline Overflow Ellipses), lihat halaman Trik CSS ini: https://css-tricks.com/line-clampin/

Tambahan2 (Mei 2019)
Seperti yang diklaim oleh tautan ini , Firefox 68 akan mendukung -webkit-line-clamp(!)

Pastikan Anda memiliki elemen blok, ukuran maksimum, dan atur overflow ke tersembunyi. (Diuji dalam IE9 dan FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Untuk multi-baris dalam penggunaan Chrome:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Terinspirasi dari youtube ;-)

Saya mengalami masalah dengan elipsis di bawah chrome. Menghidupkan ruang putih: nowrap sepertinya memperbaikinya.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

ini dan hanya ini yang melakukan pekerjaan untuk saya untuk

<pre> </pre> 

menandai

tidak ada yang gagal melakukan elipsis ....

Hanya kepala bagi siapa saja yang mungkin menemukan ini ... H2 saya mewarisi

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

yang tidak memungkinkan ellipsis. Rupanya ini sangat rawan ya?

Tambahkan kode di bawah ini untuk tempat yang Anda sukai

contoh

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Untuk beberapa baris

Di chrome, Anda dapat menerapkan css ini jika Anda perlu menerapkan elipsis pada beberapa baris.

Anda juga dapat menambahkan lebar di css Anda untuk menentukan elemen dengan lebar tertentu:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Anda dapat mencoba menggunakan ellipsis dengan menambahkan berikut ini di CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Tapi sepertinya kode ini hanya berlaku untuk trim satu baris. Lebih banyak cara untuk memotong teks dan menampilkan elipsis dapat ditemukan di situs web ini: http://blog.sanuker.com/?p=631

Tambahkan baris berikut di CSS agar ellipsis berfungsi

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Bagi kita yang tidak ingin menggunakan lebar tetap , itu juga berfungsi menggunakandisplay: inline-grid . Jadi bersama dengan properti yang diperlukan Anda tambahkan sajadisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}