Membatasi Tulisan yang Tampil pada Suatu Bidang – HTML CSS

Pada tampilan situs web tentu harus memiliki tampilan yang menarik dan tidak melupakan “minimalis” nya. Contohnya pada halaman detail / single page suatu website biasanya memiliki sidebar baik itu disebelah kanan ataupun kiri dan biasanya pada sidebar tersebut terdapat widget Komentar Terbaru khususnya untuk halaman detail suatu post / artikel blog.

Pada widget Komentar Terbaru misalnya ada komentar yang lumayan panjang seperti itu dan diatasnya ada nama pemberi komentarnya. Hal ini tentu tidak baik buat kesehatan website 😀

Apa lagi kalo komentarnya lebih panjang dari itu. Nah, sekarang kita akan batasi tulisan yang tampil supaya tidak sepanjang itu tapi bukan berarti menghapus komentar yang ada menjadi lebih pendek.

Silahkan buka codingan nya, pada tulisan ini saya bungkus di dalam link / sehingga tulisannya dapat di klik dan mengarah ke post / artikel yang bersangkutan dimana komentar itu di posting. Dan nya ini dibungkus didalam div, maka saya akan atur div nya saja supaya lebih rapih.

Silahkan beri CSS / style seperti ini style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" (disini saya contohkan dengan CSS inline). Setelah menerapkan code ini pada div, maka sekarang lihat hasilnya pada widget Komentar Terbaru tadi.

(lihat gambar)

Pada komentar yang tadi panjang menjadi lebih dinamis, terlihat lebih menarik padahal saya tidak menghapus tulisannya sama sekali. Dengan text-overflow yang kita terapkan pada codingan diatas membuatnya secara otomatis diakhiri dengan elipsis / 3 titik (…) di akhirnya. Kalian dapat menerapkan hal ini tidak hanya pada widget tapi pada bagian lainnya juga yang dirasa perlu untuk di pendekkan.