suliskh

Elipsis Teks Multibaris

Elipsis SebarisLink

Salah satu hal yang sering aku lakukan ketika konten teks melebihi lebar kontainernya adalah dengan menyembunyikan (clipping) beberapa karakter di akhir kalimat dan menggantinya dengan elipsis (titik tiga).

Beberapa karakter dari teks ini akan disembunyikan dan diganti dengan elipsis (titik tiga).

Berikut adalah implementasinya:

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<p class="text-ellipsis">
  Beberapa karakter dari teks ini akan disembunyikan dan diganti dengan elipsis
  (titik tiga).
</p>

Elipsis MultibarisLink

Snippet di atas hanya bekerja pada satu baris teks. Dibutuhkan teknik tambahan agar clipping terjadi saat baris teks melebihi jumlah tertentu. Aku menemukan teknik unik yang memanfaatkan properti CSS khusus Webkit. Lebih lengkapnya sebagai berikut.

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Properti webkit-line-clamp: 2 yang dikombinasikan dengan webkit-box-orient: vertical dan display: -webkit-box akan menghasilkan efek clipping saat teks melebihi dua baris. Kamu bisa mengganti nilai 2 dengan jumlah baris yang kamu inginkan.

Beberapa karakter dari teks ini akan disembunyikan dan diganti dengan elipsis (titik tiga).