Lebih Mengenal Properti CSS3 text-overflow: ellipsis

Lebih Mengenal Properti CSS3 text-overflow: ellipsis

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×