Display, Visibility, & Overflow
Mengubah perilaku elemen dengan display (block, inline, inline-block, none), menyembunyikan elemen, dan mengatur isi yang melebihi kotak.
Properti display
Setiap elemen punya sifat tampil bawaan (block atau inline), dan display bisa mengubahnya. Ini salah satu properti terpenting di CSS.
| Nilai | Perilaku | Bisa diatur width/height? |
|---|---|---|
block | Mulai baris baru, melebar penuh | Ya |
inline | Mengalir dalam baris teks | Tidak (abaikan width/height, margin atas-bawah) |
inline-block | Mengalir seperti inline, tapi bisa di-size seperti block | Ya |
none | Elemen dihilangkan total dari tata letak | — |
flex | Container fleksibel (bab berikutnya) | Ya |
grid | Container grid (bab berikutnya) | Ya |
Contoh inline-block
Misalkan kamu ingin tiga kotak berjejer ke samping dengan ukuran tertentu:
.kotak {
display: inline-block;
width: 100px;
height: 60px;
}Tautan (<a>) bersifat inline, jadi padding atas-bawah tidak mendorong elemen sekitarnya. Dengan display: inline-block atau block, tautan bisa diubah menjadi tombol yang utuh.
Menyembunyikan elemen
| Cara | Efek |
|---|---|
display: none | Hilang dan tidak memakan ruang. Tidak dibaca pembaca layar. |
visibility: hidden | Tidak terlihat tetapi ruangnya tetap ada. |
opacity: 0 | Transparan penuh; ruang tetap ada dan masih bisa diklik. |
Overflow: isi melebihi kotak
Jika isi lebih besar dari kotaknya (karena ada height tetap), isi akan "tumpah". Atur dengan overflow:
| Nilai | Efek |
|---|---|
visible | Tumpah keluar (bawaan) |
hidden | Bagian yang tumpah dipotong |
scroll | Selalu ada bilah gulir |
auto | Bilah gulir hanya muncul bila perlu |
.log {
height: 120px;
overflow: auto;
}Memotong teks panjang dengan titik tiga
.judul {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* "Judul yang sangat pan..." */
}Tiga properti di atas harus dipakai bersamaan agar efek titik-titik (ellipsis) berfungsi.