Membuat Ellipsis Lebih Dari Satu Baris

Membuat Ellipsis Lebih Dari Satu Baris

Bola Hero Gawai

Membuat Ellipsis Lebih Dari Satu Baris

Membuat Ellipsis Lebih Dari Satu Baris
Seperti telah kita ketahui bahwa ellipsis adalah pemotongan teks yang melebihi kotak pembungkusnya dengan menggunakan tiga titik. Penggunaan properti ellipsis ini berguna untuk merapihkan sebuah elemen dengan hanya menampilkan satu baris teks saja, jadi walaupun ada teks yang lebih panjang tidak akan tampil dua atau tiga baris. Tiga titik yang muncul karena ellipsis itu menandakan bahwa teks tersebut terpotong dan ada kelanjutannya.

Pada umumnya text-overflow: ellipsis hanya menampilkan satu baris kalimat dengan tiga titik dibelakangnya seperti demo ini, namun kini kita bisa mengatur banyaknya baris yang ingin ditampilkan pada text-overflow: ellipsis ini.

Untuk dapat menggunakan ellipsis ini kita harus menggunakan css di bawah ini untuk html berikut:



<div class="ellipsis">
    This is some long text that will not fit in the box
</div>

Maka CSS-nya seperti berikut:


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

Jika salah satu elemen css-nya dihilangkan maka ellipsis tidak akan berfungsi.

Nah jika kita ingin menampilkan lebih dari satu baris ellipsis, maka css yang digunakan seperti di bawah ini.


<div class="ellipsis">
    This is some long text that will not fit in the box and will show in two lines.
</div>


div.ellipsis {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Bisa dilihat perbedaannya pada kedua CSS di atas yang digunakan, ada yang dihilangkan dan ada yang ditambahkan. Angka 2 pada -webkit-line-clamp untuk menentukan banyaknya baris yang ditampilkan.


Bagaimana, mudah bukan, selamat mencoba....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

13 Comments Add Comment

Ikut nyimak Kang Adhy... :)

Balas

Silahkan kang :)

Balas

Dicoba dulu om hahahahahah =D

Balas

hmmm bisa untuk pengaturan readmore :) juga ya ..
makasih kang :-d

Balas

Nyimak kang :)
OOT kang KOmpi yang semakin keren,..
Tutorial membuat related post terhubung ke adsense sperti kompi ajaib gimana ya kang?
trimakasih utk tanggapannya kang :)

Balas

Bukan terhubung mas, tapi related post-nya saya buat mirip matched content Adsense.

Balas

Besok saya buatkan postingannya.

Balas

Wah pasti menarik nih kang. Ditunggu Tutor nya

Balas

Silahkan mas :)

Balas

ok... trimakasih kang tanggapannya :)

Balas

Oh namanya ellipsis ternyata, sumpah ini yang sangat aku cari-cari om, membuat teks di bawah gambar produk di toko online saya, biar halaman depan toko online tidak berantakan, aku cari-cari tutorialnya sampai aku membatasi jumlah pengetikan manual, akhirnya ketemu tutorialnya di kompiajaib, makasih buwanyakkk om!

www.foredi.in

Balas
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!

×
×
×