CSS Ellipsis, did you know?

Test… test… Uhuk.. Everybody calm down please, this is my first post :)

Well, ini adalah benar-benar tulisan pertama saya di Medium, setelah beberapa lama menjadi silent reader. Saya harap semua berjalan dengan baik :D

Materi yang saya pilih disini adalah tentang fitur CSS bernama “Ellipsis”. Bukan tanpa alasan, karena memang setelah sekian lama menjadi web developer (backend/frontend), saya baru tau ada css property / fitur seperti ini yang sebenarnya sering saya butuhkan dari dahulu. (Come on Ardi,,, kemana saja kamu?)

What is Ellipsis?

Secara bahasa, ellipsis berarti tanda pengganti (terjemahan google translate). Pada konteks kali ini, ellipsis adalah sebuah tanda pengganti akhir dari sebuah limited short description. Sering kita temukan pada halaman article list ada penjelasan singkat suatu konten yang diakhiri oleh tanda “…” pada akhir kalimatnya. Ya, itu yang disebut ellipsis. Sudah paham ya?

Ellipsis on Medium post list

Old School Solution

Saya yakin ada banyak orang yang masih menggunakan PHP untuk memotong sebuah short description , entah berdasarkan jumlah characters ataupun jumlah words nya. Apakah itu efektif? Sebenarnya tidak. Kenapa? karena ukuran tiap character / word bisa berbeda-beda. Sehingga, bisa jadi kalimat yang kita potong tidak benar-benar memenuhi sebuah container, bisa kurang dan bisa jadi lebih. Dan alasan kedua, di zaman responsive-html saat ini, ukuran container seharusnya menyesuaikan dengan ukuran device-nya. Sehingga susah untuk memprediksi berapa batasan characters / words yang harus ditentukan.

Pure CSS Solution

Sebenarnya, dengan pure CSS kita sudah bisa mengantisipasi masalah ini dengan efektif. Ada beberapa teknis ellipsis yang bisa digunakan. Kamu bisa lihat contohnya disini : http://codepen.io/masardee/pen/gLbYWq

Text-overflow property

Teknik ini bisa digunakan di semua modern browser, tapi hanya mampu memotong satu baris kalimat.

.ellipsis-single-line{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

-Webkit-line-clamp property

Seperti judulnya, teknik ini hanya bisa digunakan pada browser yang mendukung webkit property. Kelebihannya adalah, teknik ini bisa digunakan untuk memotong beberapa baris kalimat. Kita hanya tinggal mendefinisikan berapa jumlah baris yang dibutuhkan ke dalam -webkit-line-clamp property. Pada contoh code dibawah, short description akan dibatasi dalam 2 baris kalimat. Jika kalimat tersebut sebenarnya muncul dalam lebih dari 2 baris, maka pada baris kedua di akhir kalimat akan dipotong dengan ellipsis characters “…” . Jika kurang dari 2 baris, maka ellipsis tidak akan muncul.

.ellipsis-two-lines{
display: -webkit-box;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

Opera -o-ellipsis-lastline property

CSS property ini hanya didukung oleh browser Opera. Terus terang, saya belum pernah mencobanya. Tapi fitur ini berfungsi sama seperti -webkit-line-clamp property.

There is No One-Size-Fits-All Solution

Pada saat ini, hanya text-overflow property yang bisa dimanfaatkan untuk teknik ini, meskipun hanya mampu membatasi kalimat dalam 1 baris. Jika kamu tidak mempermasalahkan fitur ini tidak berjalan pada Firefox & IE, kamu bisa menggunakan -webkit-line-clamp property & -o-ellipsis-lastline property untuk membatasi kalimat dalam beberapa baris.