CSS Overflow

Properti css overflow digunakan untuk mengatur apa yang terjadi ketika kontennya berukuran lebih besar daripada area yang diberikan.

Contoh, saya punya paragraf yang ukurannya melebihi kapasitas. Saya set tingginya hanya 50px.

Ini contoh paragraf yang saya bikin ukuran tinggi hanya 50px. Scroll paragraf ini. Coba lihat apa yang akan terjadi. Tapi, sebelum itu saya harus menulis teks ini yang panjang. Supaya ukuran teks paragraf ini lebih dari 100px. Kalau enggak ya tidak terlihat dong efeknya.

Tahu kan efeknya?

Jenis overflow

Ada tiga jenis property css yaitu:

• overflow, mengatur apa yang terjadi jika ukuran konten melebihi ukuran box
• overflow-x, mengatur apa yang terjadi jika ukuran konten melebihi panjang box
• overflow-y, mengatur apa yang terjadi jika ukuran konten melebihi tinggi box

Nilai property

Ada empat nilai dari properti overflow, yaitu:

• visible, jadi kontennya nabrak aja melebihi ukuran box
• hidden, sisa kontennya tidak ditampilkan
• scroll, box otomatis akan ngescroll untuk melihat sisa kontennya
• auto, ini efeknya sama dengan scroll

Overflow visible

Value visble memungkinkan konten yang ada dalam box akan tetap keluar dari box.

Ini contoh dari overflow visible. Saya buat kotak dengan ukuran 300 x 100. Lihat hasilnya akan jadi seperti apa ya.

Kodenya:

p {
width:300px; 
height:100px; 
overflow:visible;
background-color: #eee;
}

Overflow hidden

Kebalikan dari visible, kalau hidden konten yang lebih akan dihidden / disembunyikan.

Ini contoh dari overflow hidden. Saya buat kotak dengan ukuran 300 x 100. Lihat hasilnya akan jadi seperti apa ya.

Kodenya:

p {
width:300px; 
height:100px; 
overflow:visible;
background-color: #eee;
}

Overflow scroll

Yang umum dipakai ini. Value scroll memungkinkan box akan bisa discroll isinya. Jadi, ketika konten berlebih maka bisa discroll untuk melihat sisa kontennya.

Ini contoh dari overflow scroll. Saya buat kotak dengan ukuran 300 x 100. Lihat hasilnya akan jadi seperti apa ya.

Kodenya:

p {
width:300px; 
height:100px; 
overflow:scroll;
background-color: #eee;
}

Overflow auto

Efek auto sama saja dengan scroll.

Mudah kan mengatur overflow? Pengaturan ini penting supaya kamu bisa memanage konten dengan tampilan yang keren.

Bayangin kalau konten tidak teratur? Pasti dibaca jadi sangat annoying kan!

Property CSS Overflow

Berikut ini adalah tabel daftar properti untuk overflow css:

Properti	Keterangan
overflow-y	Mengatur jika konten melebihi tinggi box
overflow-x	Mengatur jika konten melebihi panjang box
overflow	Mengatur jika konten melebihi ukuran box

Sekian tutorial mengatur css overflow. Semoga bermanfaat ya!