Konten nyata selalu lebih panjang dari desain
Desain memakai teks contoh yang rapi; data nyata tidak. Nama produk bisa 90 karakter, nama kota bisa sangat panjang. Komponen yang tangguh tidak memakai height tetap dan siap terhadap teks berlebih — pakai min-height plus pembatas baris. Ini pembeda antara 'sesuai desain' dan 'tahan produksi'.
👀 Contoh dulu
/* RAPUH: teks panjang akan terpotong atau meluber */
.kartu-buruk { height: 120px; }
/* TANGGUH: punya tinggi minimum tapi boleh tumbuh */
.kartu-baik { min-height: 120px; }
/* batasi judul maksimal 3 baris */
.judul {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Hasilnya: Kartu tetap seragam tingginya saat konten pendek, dan tidak rusak saat kontennya panjang.
💡 Uji komponenmu dengan teks 3x lebih panjang dari desain — begitulah data produksi berperilaku.
📝 Sekarang giliranmu
Buat kartu tahan konten panjang: ganti pendekatan tinggi tetap dengan min-height: 80px, dan batasi judul jadi 2 baris memakai display: -webkit-box, -webkit-line-clamp: 2, -webkit-box-orient: vertical, overflow: hidden pada .judul.