CSS Overflow

Properti CSS overflow

Penggunaan properti CSS overflow

Overflow bisa diartikan sebagai kelebihan dari suatu elemen.

Misal elemen dengan properti overflow: visible

Ini adalah elemen dengan overflow : visible yang dimensinya melebihi box yang membingkainya. Sehingga kelebihan dari elemen ini berada diluar bingkainya.

Berikut ini adalah detail value dari properti overflow:

1. overflow: visible (kelebihan elemen terlihat)
2. overflow: hidden (kelebihan elemen tersembunyi)
3. overflow: auto (kelebihan elemen tersembunyi tapi dapat digeser.)
4. overflow: scroll (sama dengan auto)

Mengatur arah Overflow

1. overflow-x: (arah geser/scroll horisontal)
2. overflow-y: (arah geser/scroll vertikal)

Pengaturan CSS - overflow hanya berlaku untuk elemen block yang memiliki height.
Elemen block yang umum digunakan untuk teks misal :

<div>,<p>,<section>,<main>,<article>,<blockquote>

Dengan elemen block maka cukup menambahkan height melalui CSS

<style>
  elemen {
  height: 100px;
  }
</style>

DEMO properti:
overflow: hidden

Paragraf ini tidak bisa digeser. Ini adalah elemen yang dimensinya melebihi box yang membingkainya. Sehingga kelebihan dari elemen ini berada diluar bingkainya.

tidak dapat di-scroll

DEMO properti:
overflow: auto / scroll

Geser paragraf ini. Ini adalah elemen yang dimensinya melebihi box yang membingkainya. Sehingga kelebihan dari elemen ini berada diluar bingkainya.

scroll 2 arah atas / bawah

DEMO properti :
overflow-x: scroll
overflow-y: hidden

Geser paragraf ini. Ini adalah elemen yang berisi teks dengan CSS overflow-x yang memungkinkan untuk mengatur arah geser kiri/kanan dan overflow-y untuk mengatur arah geser ke atas dan ke bawah.

scroll 2 arah kiri / kanan

DEMO properti :
overflow-x: auto
overflow-y: scroll

Geser paragraf ini. Ini adalah elemen yang berisi teks dengan CSS overflow-x yang memungkinkan untuk mengatur arah geser kiri/kanan dan overflow-y untuk mengatur arah geser ke atas dan juga ke bawah.

scroll 4 arah

⇐ Sebelumnya

Selanjutnya ⇒