Kode Memotong Judul Artikel yang tmapil.

 

Anda bisa menggunakan CSS untuk memotong teks secara visual dengan text-overflow: ellipsis;, tetapi untuk membatasi teks hingga 100 karakter secara fungsional, Anda perlu menggunakan JavaScript.

Berikut adalah tambahan kode JavaScript yang akan membatasi judul agar tidak lebih dari 100 karakter:

Tambahan JavaScript

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("#recentpostsae h3").forEach(function (title) {
        let maxLength = 100;
        if (title.textContent.length > maxLength) {
            title.textContent = title.textContent.substring(0, maxLength) + "...";
        }
    });
});

Kode ini akan:

• Mengecek setiap elemen <h3> dalam #recentpostsae.
• Jika teks lebih dari 100 karakter, maka akan dipotong dan ditambahkan "..." di akhir.

Jika ingin hanya memotong teks secara visual tanpa mengubah kontennya, tambahkan kode CSS berikut:

Tambahan CSS

#recentpostsae h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

Namun, cara ini hanya bekerja jika teks dalam satu baris. Jika ingin memotong dalam beberapa baris, gunakan:

#recentpostsae h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Silakan coba dan beri tahu jika ada yang perlu disesuaikan! 😊