Cara memotong Kata / Karakter pada Judul Artikel atau Deskripsi

Cara memotong Karakter atau Kalimat - Ada beberapa cara yang bisa dilakukan untuk memotong kalimat supaya tidak terlalu panjang. Biasanya ini dilakukan pada Judul Artikel atau Deskripsi postingan.

Oke sob, sesuai request dari Bang Rino, tentang Bagaimana cara mempersingkat jumlah karakter kata pada judul artikel, kali ini kita akan memahami beberapa CSS yang bisa digunakan.

text-overflow: ellipsis

text-overflow: ellipsis bisa digunakan untuk memangkas karakter pada satu baris saja. Syaratnya harus disertakan overflow: hidden dan white-space: nowrap. Untuk contoh CSS seperti ini:

.box {
  text-overflow: ellipsis;

  /* Harus ada supaya berjalan ellipsisnya */
  overflow: hidden;
  white-space: nowrap;
}

untuk demonya, silahkan uji coba juga di JsFiddle

line-clamp

line-clamp bisa digunakan untuk memangkas lebih dari satu baris. Syarat wajib CSSnya harus seperti ini :

.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

-webkit-line-clamp: 3 angka 3 pada valuenya menunjukan pada baris ke berapa akan terpotong. Bisa baris 2, 3, 4, dst... Silahkan intip demonya:

Browser support

Untuk line-clamp dan ellipsis support semua browser, kecuali Internet Exploler.
Semoga bermanfaat...