Membuat Ellipsis Lebih Dari Satu Baris

Seperti telah kita ketahui bahwa ellipsis ialah pemotongan teks yang melebihi kotak pembungkusnya dengan memakai tiga titik. Penggunaan properti ellipsis ini berkhasiat 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 alasannya ellipsis itu mengambarkan bahwa teks tersebut terpotong dan ada kelanjutannya.

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

Untuk sanggup memakai ellipsis ini kita harus memakai 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 menyerupai 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 jikalau kita ingin menampilkan lebih dari satu baris ellipsis, maka css yang dipakai menyerupai 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 memilih banyaknya baris yang ditampilkan.

Hasilnya

Bagaimana, gampang bukan, selamat mencoba....
Sumber https://www.kompiajaib.com/

Share this post