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...