Memotong kalimat dan memberi tanda titik-titik di akhir text

Saya tidak tahu apa istilahnya yang tepat dalam bahasa Indonesia, tapi yang saya maksud adalah memotong kalimat seperti dalam gambar atau kita sebut truncating.

Bagaimana membuat tampilan seperti itu?
Ada programmer yang membatasi karakter yang ditampilkan, tapi menurut saya cara seperti itu agak "rapuh" menurut saya.
Nah, kita akan membahas cara lain yang bisa digunakan.


Ada 2 kasus yang akan kita bahas. Kasus pertama, bila kalimatnya hanya 1 baris. Kasus kedua, kita butuh menampilkan lebih dari 1 baris.

1. Kalimat satu baris / Single Line

Styling yang kita butuhkan adalah kombinasi berikut:

See the Pen Truncate the text (One line text) by pras abdilah (@pras-abdilah) on CodePen.

Metode ini tidak bisa diaplikasikan pada display: table.

2. Kalimat lebih dari 1 baris / Multi Lines

Kita butuh memotong kalimat di baris kedua atau lebih, maka styling di atas tidak lagi mencukupi karena salah satu syarat dari styling di atas adalah white-space: nowrap.

Lalu bagaimana caranya?

Kita coba dengan CSS dulu

See the Pen PwaXMM by pras abdilah (@pras-abdilah) on CodePen.

Kelemahan cara tersebut adalah huruf di akhir text bisa terpotong. Selain itu kita membutuhkan presisi line-height dan height.

Kita bisa pakai cara yang mirip namun memanfaatkan background gradient, sehingga text akan terlihat samar-samar kemudian hilang. Silakan coba-coba sendiri.

Tidak mau ada huruf terpotong dan tidak mau memakai background gradient? Maka kita butuh bantuan javascript,

Clamp.js

Kita akan memakai clamp.js

See the Pen MYXLam by pras abdilah (@pras-abdilah) on CodePen.