Memotong Tampilan Teks dengan CSS

Nov 20, 2009   //   by anggie   //   CSS  //  18 Comments

gmailHmm….mungkin Anda bingung dengan judul tulisan ini. Oke, saya perjelas terlebih dahulu. Memotong tampilan teks yang saya maksud disini adalah seperti pada Interface Gmail, email service dari Google. Pada kotak masuk pesan Gmail, terlihat isi tabel tampil rata (justify) yang seolah-olah terpotong pada bagian kanannya. Nah, pada tulisan kali ini, saya akan memberikan tips untuk membuat tampilan tabel seperti itu.

Sebenarnya, tips ini murni menggunakan CSS dalam implementasinya. Anda cukup memperbarui CSS dari tabel yang akan Anda terapkan, menjadi seperti berikut ini. 

#tableID td.potong
{
	text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
}

OK, itulah caranya. Mudah sekali bukan? Anda sekarang memiliki class ‘potong’ yang siap Anda pakai untuk memotong tampilan tabel dengan rapi. Semoga membantu.

No related posts.

Tags: ,

18 Comments

  • YM 20/11/2009 at 11:11 am

    Trik singkat tapi OK punya…Lumayan..

    Haha

  • Luthfi Emka 26/11/2009 at 8:26 am

    mantap kali om tipsnya, kagak pernah kepikiran bikin gitu ya…hahha

  • rekoyunasril 13/01/2010 at 9:36 pm

    Salam kenal boss…..Keren juga tutorialnya

  • cahyadi 14/01/2010 at 12:00 pm

    koq aku ngk bisa nerapinnya yach????
    cma ditambahin di CSS-nya aja kan????trus setiap data yg di table td, maka datanya akan kepotong, begitu kan???
    koq aq ngk bisa ya???

  • anggie 21/01/2010 at 10:42 am

    @cahyadi…setelah CSS anda tambahkan, pada td yang ingin dipotong, jangan lupa tambahkan menjadi 

    <td class='potong'>
  • adam 11/03/2010 at 6:13 am

    tips menarik dan gampang utk di coba
    makasih ya :)

  • Taufiq Rismadany 24/09/2010 at 12:55 pm

    keep berbagi!

  • ivan 01/11/2010 at 9:40 pm

    emang ada mas property ‘text-overflow’

  • anggie 02/11/2010 at 10:01 am

    Ada lah mas…klo ga ada ngapain saya posting…hehe

  • komang 08/11/2010 at 8:04 am

    sy make text-overflownya ga bisa mas..
    ga kedetect ma cssnya..piye iki mas?

  • anggie 09/11/2010 at 2:28 pm

    Ga kedetect apa mas? browser? Browsernya apa? saya pake firefox bisa kok…

  • komang 12/11/2010 at 8:47 pm

    firefox,chrome, explorer… ga bisa mas..
    waktu sy coding, harusnya kan berwarna biru muda (sy pake notepad++ buat css) text-overflownya, tp malah hitam doank mas.. kira2 apa yg error ya?

  • anggie 13/11/2010 at 12:21 pm

    oh, klo masalah editor, saya juga mas,, editor saya (komodo edit) juga mendeteksi error, tidak terdefinisi dalam library nya dia…at least, harusnya firefox bisa…cek disini klo mau lbh jelas http://www.quirksmode.org/css/textoverflow.html

  • komang 16/11/2010 at 10:43 pm

    baru berhasil mas..
    kmaren2 tu ga berhasil karena pake id dan class…
    skrg cma pake class aja beres..nuun mas..
    tmbh lg postingan2nya..
    :)

  • anggie 18/11/2010 at 11:19 am

    Sip mas…iya, saya lagi cari waktu buat nulis ^^

  • moch ichlas 25/11/2010 at 11:14 am

    kenapa tidak dibatasi saja lenght/panjangnya ukuran tipedata pada db..

  • anggie 25/11/2010 at 2:00 pm

    Hem? ini cuma buat tampilan pak…biar kelihatan rapi seperti GMail nya Google

  • ipoekScripterWear 01/02/2011 at 3:35 pm

    hahahaha… gag pernah terpikirkan..ckckck


Leave a comment