(CSS) Fungsi OVERFLOW

OVERFLOW sering digunakan dalam kode CSS. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting atau widget, kadang kadang ada yang memakan tempat ke pinggir atau ke bawah. Supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakan syntax overerflow.

Penggunaan kode ini ada beberapa alternatif, yaitu:

1. overflow:scroll
2. overflow:auto
3. overflow:hidden
4. overflow:display

Sebagai contoh, saya akan membuat objek untuk postingan atau widget. Contoh kode yang digunakan adalah :

<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;">
teks atau gambar di sini</div>

keterangan:
background-color : warna latar belakang
border : warna garis pinggir
padding : jarak dari pinggir garis ke objek
width : lebar
height : tinggi
overflow : silahkan pilih auto, scroll, hidden atau display sesuai kebutuhan.

Hasil overflow:auto

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:scroll

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:hidden

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi oferflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:display

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.