Membuat Ellipsis Lebih Dari Satu Baris

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/31/2016

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....