Cara memotong tampilan teks dengan CSS
Pernah lihat tampilan teks pada tabel di Gmail? Pada kotak masuk pesan pada Gmail, interface-nya keliatan tampil rapi dan rata (Justify) yang seolah-olah terpotong pada bagian kanannya. Kira-kira tampilannya seperti ini :
Nahh mungkin selama ini teman-teman sering menggunakan kodingan pada PHP untuk membatasi banyaknya kata/kalimat yang akan ditampilkan. Tapi ternyata dengan CSS juga bisa lohh. Kodingannya kira-kira seperti ini :
Yaa kira-kira seperti itulah caranya. Jadi sekarang teman-teman sudah memiliki class 'potong' yang siap dipakai untuk memotong tampilan tabel dengan rapi. Jangan lupa setelah CSS-nya dibuat, pada td yang ingin dipotong tambahkan :
Semoga bermanfaat :)
Interface Kotak Masuk Gmail |
#tableID td.potong
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
Yaa kira-kira seperti itulah caranya. Jadi sekarang teman-teman sudah memiliki class 'potong' yang siap dipakai untuk memotong tampilan tabel dengan rapi. Jangan lupa setelah CSS-nya dibuat, pada td yang ingin dipotong tambahkan :
<td class='potong'>Untuk lebih jelasnya bisa baca disini.
Semoga bermanfaat :)
No comments