Lebih Mengenal Properti Css3 Text-Overflow: Ellipsis

Properti CSS3 text-overflow: ellipsis sanggup diartikan sebagai pemotongan teks saat panjang teks melebihi lebar element div dengan menggantinya dengan 3 buah titik (...). Contoh mudahnya sanggup kita lihat di halaman hasil penelusuran Google, saat terdapat sebuah title artikel terlalu panjang maka akan otomatis terpotong dengan tiga titik di selesai title-nya ibarat pada gambar di bawah ini.

Jika kita lakukan inspect element pada title artikel tersebut maka terang Google memakai properti text-overflow: ellipsis, ibarat pada gambar inspect element yang saya lakukan di bawah ini.

Jika kita akan menciptakan pemotongan kalimat dengan memakai properti ellipsis, maka elemen div harus mempunyai style ibarat berikut.

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

Catatan: lebar div diadaptasi dengan impian kita.

Contoh penerapannya silahkan lihat di JsFiddle.

Dan perlu diperhatikan juga, properti ellipsis akan bekerja pada elemen div yang mempunyai style display:block. Secara default, biasanya element div akan mempunyai style display:block. 

Namun hal ini tidak berlaku saat kita menambahkan link pada teksnya dengan CSS style untuk link ibarat berikut.

 div.ellipsis a{
     white-space: nowrap;
     width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
 }

Contohnya silahkan lihat di JsFiddle.

Jika hal ini terjadi ibarat referensi tadi (text-overflow: ellipsis tidak berfungsi), maka kita harus memastikan bahwa element div mempunyai style display:block, maka kita sebaiknya menambahkannya pada CSS style di atas sehingga menjadi ibarat berikut ini.

 div.ellipsis a{
     white-space: nowrap;
     width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     display:block;
 }

Contohnya silahkan lihat di JsFiddle.

Pada beberapa kasus, Anda juga sanggup memakai style display:inline-block biar sesuai dengan penempatannya. Contoh penerapannya silahkan lihat pada JsFiddle. Silahkan perkecil kolom widgetnya dan perhatikan pada judul lagu di paling bawah. Ketika lebar playernya menyentuh judul lagu, maka judul lagunya akan otomatis menjadi titik-titik diujungnya.

Sumber https://www.kompiajaib.com/

Share this post