Cara Set Line Clamp di CSS | Batasi Baris Teks dengan CSS (2 atau 3 baris saja)

             Kalian tentunya tidak asing dengan sebuah "Blog Post" yang menampilkan Judul Artikel dari sebuah website yang hanya ada 2 atau 3 baris saja dan sisanya diganti dengan "...", hal itu biasa disebut dengan line-clamp atau dalam bahasa yang lebih mudah adalah membatasi baris dari sebuah judul ataupun text apapun. Line clamp umum digunakan pada halaman blog atau artikel dengan tujuan utama adalah membuat tampilan sebuah halaman itu dengan rapi, permasalahan ini bisa terjadi karena judul yang dibuat oleh penulis tidak tentu selalu 2 baris di sebuah artikel yang dituliskannya, oleh karena itu pengembang web biasanya otomatis membuat batasan pada judul itu menjadi 2 baris dan sisanya menjadi "...".

            Pada artikel ini permasalahan yang akan terjawab adalah "Bagaimana cara membatasi Judul/ Teks apapun Menjadi Hanya 2 baris saja". Kalian bisa melakukan penyesuaian pada jumlah baris yang akan ditampilkan. Caranya sebenarnya cukup mudah, hanya menggunakan teknik overflow saja, jika melibihi itu maka diganti menjadi Hidden. Untuk lebih lengkapnya bisa kalian ikuti cara berikut ini.

1. Kalian tentukan target dari element yang ingin kalian set barisnya
    (Pada kasus ini saya mentarget class .post_title)
2. Copy code dibawah ini.

.post_title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Kalian bisa mengganti angka pada "-webkit-line-clamp : 2" untuk membatasi berapa baris yang ditampilkan, pada Contoh Kasus ini saya akan membatasi baris menjadi "-webkit-line-clamp : 1" maka tampilan judul akan menjadi seperti gambar dibawah ini :

Baca Juga : 3+ Rekomendasi Platform Belajar Coding dari Nol | Belajar html dari nol | Belajar Coding Pemula
Berikut perbandingan jika tanpa menggunakan Line Clamp dibawah ini :

Kesimpulan

            Dari penjelasan diatas dapat disimpulkan bahwa fungsi dari line clamp adalah untuk menjadikan tampilan dari post menjadi rapi dan rata semua menjadi 2 atau 3 baris yang rata sesuai dengan yang ditentukan, oleh karena itu dengan artikel singkat ini semoga bisa membantu permasalahan kalian.

Terimakasih kalian sudah membaca tulisan ini, semoga bermanfaat. Silahkan tambahkan diskusi pada kolom komentar dan ingin, diskusi yang sopan ya. Sampai bertemu pada tulisan selanjutnya.