Ditulis oleh: Ditulis pada: 12/09/2014
Properti CSS3
text-overflow: ellipsis dapat diartikan sebagai pemotongan teks ketika panjang teks melebihi lebar element div dengan menggantinya dengan 3 buah titik (...). Contoh mudahnya bisa kita lihat di halaman hasil penelusuran Google, ketika terdapat sebuah title artikel terlalu panjang maka akan otomatis terpotong dengan tiga titik di akhir title-nya seperti pada gambar di bawah ini.
Jika kita lakukan inspect element pada title artikel tersebut maka jelas Google menggunakan properti
text-overflow: ellipsis, seperti pada gambar inspect element yang saya lakukan di bawah ini.
Jika kita akan membuat pemotongan kalimat dengan menggunakan properti
ellipsis, maka elemen div harus memiliki style seperti berikut.
div.ellipsis {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
Catatan: lebar
div disesuaikan dengan keinginan kita.
Contoh penerapannya silahkan lihat di JsFiddle.
Dan perlu diperhatikan juga, properti
ellipsis akan bekerja pada elemen div yang memiliki style display:block. Secara default, biasanya element div akan memiliki style display:block.
Namun hal ini tidak berlaku ketika kita menambahkan link pada teksnya dengan CSS style untuk link seperti berikut.
div.ellipsis a{
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
Contohnya silahkan lihat di JsFiddle.
Jika hal ini terjadi seperti contoh tadi (
text-overflow: ellipsis tidak berfungsi), maka kita harus memastikan bahwa element div memiliki style display:block, maka kita sebaiknya menambahkannya pada CSS style di atas sehingga menjadi seperti 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 bisa menggunakan style
display:inline-block agar 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.