Materi
Kotak yang lebar atau tingginya dibatasi bisa kemasukan isi yang lebih besar dari dirinya. Properti overflow menentukan nasib isi yang meluap. Nilai bawaannya visible: isi tetap tergambar di luar kotak dan menimpa elemen di sekitarnya. hidden memotong isi di tepi padding. auto memotong lalu menampilkan bilah gulir hanya saat isinya meluap, sedangkan scroll selalu menampilkan bilah gulir.
.nama-produk {
white-space: nowrap; /* tetap satu baris */
overflow: hidden; /* potong luapannya */
text-overflow: ellipsis; /* tandai potongan dengan … */
}
.bungkus-tabel { overflow-x: auto; }
.foto img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}Nama produk yang terlalu panjang untuk kartu sempit bisa dipotong dengan text-overflow: ellipsis. MDN menegaskan text-overflow tidak membuat teks meluap sendiri. Ia butuh white-space: nowrap supaya teks tidak turun baris, dan overflow: hidden supaya luapannya dipotong.
Foto punya masalah serupa. Nilai bawaan object-fit adalah fill: gambar ditarik memenuhi kotak tanpa menjaga perbandingannya, jadi foto 4:3 di kotak persegi tampak gepeng. cover menjaga perbandingan dan memenuhi kotak, lalu memotong bagian yang berlebih. contain menjaga perbandingan dan memuat seluruh gambar, menyisakan ruang kosong. aspect-ratio: 1 / 1 membuat kotaknya persegi tanpa menulis tinggi.
