• Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa

Search

Loading...

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 :

Interface Kotak Masuk Gmail
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 :

#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 :)



Related Post



2 comments:

  1. penerapannya biasanya dimana mas? maaf nubie

    ReplyDelete
  2. @Arif K Wijayanto : Kalau kita mau bikin tabel yang seperti kotak masuk gmail itu. ntar tinggal panggil CSS-nya aja.

    ReplyDelete

Copyright © 2015 priawadi.com All Rights Reserved.