Lebih Mengenal Properti CSS3 text-overflow: ellipsis

Properti CSS3 text-overflow: ellipsis dapat diartikan sebagai pemotongan teks ketika panjang teks melebihi lebar element div dengan menggantinya dengan 3 buah titik (...). Contoh mudahnya bisa kita lihat di halaman hasil penelusuran Google, ketika terdapat sebuah title artikel terlalu panjang maka akan otomatis terpotong dengan tiga titik di akhir title-nya seperti pada gambar di bawah ini.

Properti CSS3 text-overflow: ellipsis

Jika kita lakukan inspect element pada title artikel tersebut maka jelas Google menggunakan properti text-overflow: ellipsis, seperti pada gambar inspect element yang saya lakukan di bawah ini.

Inspect Element Properti CSS3 text-overflow: ellipsis
Klik gambar untuk memperbesar.

Jika kita akan membuat pemotongan kalimat dengan menggunakan properti ellipsis, maka elemen div harus memiliki style seperti berikut.


div.ellipsis {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Catatan: lebar div disesuaikan dengan keinginan kita.

Contoh penerapannya silahkan lihat di JsFiddle.

Dan perlu diperhatikan juga, properti ellipsis akan bekerja pada elemen div yang memiliki style display:block. Secara default, biasanya element div akan memiliki style display:block

Namun hal ini tidak berlaku ketika kita menambahkan link pada teksnya dengan CSS style untuk link seperti berikut.


div.ellipsis a{
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Contohnya silahkan lihat di JsFiddle.

Jika hal ini terjadi seperti contoh tadi (text-overflow: ellipsis tidak berfungsi), maka kita harus memastikan bahwa element div memiliki style display:block, maka kita sebaiknya menambahkannya pada CSS style di atas sehingga menjadi seperti berikut ini.


div.ellipsis a{
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
}

Contohnya silahkan lihat di JsFiddle.

Pada beberapa kasus, Anda juga bisa menggunakan style display:inline-block agar sesuai dengan penempatannya. Contoh penerapannya silahkan lihat pada JsFiddle. Silahkan perkecil kolom widgetnya dan perhatikan pada judul lagu di paling bawah. Ketika lebar playernya menyentuh judul lagu, maka judul lagunya akan otomatis menjadi titik-titik diujungnya.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments