Fungsi OVERFLOW Pada CSS

Assalamu’alaikum Warahmatullahi Wabarakaatuh,

Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Terkait Fungsi OVERFLOW Pada CSS.

Fungsi OVERFLOW Pada CSS

Fungsi `overflow` dalam CSS adalah untuk mengawal cara kandungan yang melimpah dari elemen yang ditentukan akan dipaparkan. 

Terdapat beberapa pilihan yang boleh digunakan dengan sifat `overflow`, termasuk `visible`, `hidden`, `scroll`, dan `auto`. 

Setiap nilai ini memberikan kesan yang berbeza pada cara kandungan yang melebihi batas elemen akan ditangani.

1. **Visible**: Ini adalah nilai lalai untuk `overflow`. Apabila `overflow: visible;` digunakan, kandungan yang melimpah akan kelihatan di luar batasan elemen tanpa sebarang pemotongan. Ini mungkin menyebabkan elemen lain di sekitarnya terjejas atau bertindih.
2. **Hidden**: Apabila `overflow: hidden;` digunakan, kandungan yang melimpah akan dipotong dan tidak akan kelihatan di luar batasan elemen. Ini berguna untuk menyembunyikan kandungan yang tidak diingini atau untuk memastikan reka bentuk yang bersih dan teratur.
3. **Scroll**: Dengan `overflow: scroll;`, kandungan yang melimpah akan dipotong, tetapi pengguna boleh menatal untuk melihat kandungan yang tersembunyi. Ini akan menambahkan bar tatal (scrollbar) pada elemen secara automatik.
4. **Auto**: Nilai `auto` adalah gabungan antara `hidden` dan `scroll`. Jika kandungan melimpah, bar tatal akan muncul secara automatik, tetapi jika kandungan muat dalam elemen, bar tatal tidak akan ditunjukkan.

Penggunaan `overflow` dalam CSS adalah penting untuk memastikan reka bentuk laman web atau aplikasi kelihatan profesional dan mudah digunakan. 

Dengan memahami dan menggunakan sifat ini dengan betul, pereka web boleh mengawal bagaimana kandungan dipaparkan dan memastikan pengguna mempunyai pengalaman yang lancar dan menyenangkan semasa melayari laman web. 

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

Hasil overflow:scroll

Hasil overflow:hidden

Hasil overflow:display

Demikian informasi tentang Fungsi OVERFLOW Pada CSS yang dapat kami sampaikan, semoga bermanfaat.

Jika informasi ini bermanfaat, Jangan lupa Share ya sobat mas rizky, Terima Kasih.