Membatasi Kalimat Yang Tampil Pada Website Dengan CSS

Pada tampilan situs website tentu harus menggunakan tampilan yang menarik dan tidak menghilangkan tampilan yang "minimalis". Contoh pada halaman detail atau single page pada suatu website biasanya memiliki sidebar baik itu berada disebelah kanan ataupun kiri dan biasanya juga pada sidebar tersebut terdapat widget post atau juga Komentar Terbaru khususnya untuk halaman detail suatu post atau artikel blog.

Silahkan buka codingan website atau blog, pada tulisan ini akan menyisipkan kalimat didalam link, sehingga tulisan dapat di klik dan mengarah ke post atau artikel yang bersangkutan dimana komentar itu di posting. Dan kode ini diletakan didalam sebuah div, maka akan mengatur div nya saja supaya lebih rapih.

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

Pada komentar yang tadinya lumayan panjang menjadi lebih dinamis, terlihat lebih menarik serta rapih padahal kalimat tersebut tidak menghapus tulisannya sama sekali. Dengan text-overflow yang diterapkan pada codingan diatas membuatnya secara otomatis dengan diakhiri tanda 3 titik (…) di akhirnya. Dengan cara tersebut juga dapat diterapkan tidak hanya pada sebuah widget tapi pada bagian lainnya juga yang perlu untuk di rapihkan.