CSS Overflow

  1. › 
  2. ›  › 
  3. CSS Overflow

Mengatur kelebihan ukuran konten yang melanggar batas elemen induknya

kelebihan (OVERFLOW-Y)

kelebihan (OVERFLOW-X)

Overflow adalah pada saat suatu elemen tidak dapat "menampung" konten yang berada didalamnya.
Atau sebaliknya : Pada saat suatu konten berukuran melebihi elemen induknya (parents element), seperti pada ilustrisi diatas.

Kenapa disebut overflow (kelebihan aliran) ?

Karena pada dasarnya halaman web berfungsi memuat informasi berupa teks. Dan teks memiliki arah baca dan juga arah dalam penulisannya baik dari arah kiri ke kanan atau sebaliknya.
Arah baca / tulis inilah yang istilahkan sebagai aliran (flow), lebih tepatnya aliran teks. Dan ketika teks melampaui batas areanya disebut overflow atau aliran yang berlebih.

Istilah tersebut diterapkan untuk semua jenis elemen HTML dan dimasukkan sebagai salah satu properti CSS yang berfungsi untuk mengatur / menentukan bagaimana kelebihan elemen tersebut harus ditampilkan.

Properti CSS - overflow

Berdasarkan ilustrasi diatas, overflow (arah aliran) ada kesamping (horisontal) dan ke bawah (vertikal), maka:

Properti overflow mencakup 2 arah aliran :
1. Vertikal = overflow-x
2. Horisontal = overflow-y

Setelah dideklarasikan arah aliran( overflow )nya dengan properti diatas selanjutnya deklarasi tindakan apa yang akan ditetapkan pada arah aliran tersebut.

Berikut ini nilai properti (value) yang mendeklarasikan tindakan terhadap overflow :

1. visible : Tampak / ditampilkan.
2. hidden : Disembunyikan.
3. scroll : Dapat digeser.
4. auto : Ditentukan oleh browser.
CATATAN :

Properti dasar (default) semua elemen HTML adalah visible.
Sehingga ketika terdapat elemen dengan overflow, maka secara default kelebihan tersebut akan ditampilkan seperti contoh dibawah ini.

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

Menyembunyikan kelebihan ukuran konten.

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        overflow: hidden;
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

PERHATIKAN :
Properti overflow:visible hanya bertugas menyembunyikan kelebihan elemen.
Sehingga hasilnya seperti diatas, tidak bisa digeser dan kelebihannya tidak terlihat.

Dibawah ini contoh dengan menerapkan scroll pada nilai properti overflow-nya.

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        overflow: scroll;
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

overflow-x

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        overflow-x: auto
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

overflow-y

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        overflow-y: auto;
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

overflow-x & overflow-y

<div class='induk'>
  <div class='konten'>
  <p> Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.</p>
  </div>
</div>
<style>
.induk {
        padding:5px;
        margin:5px;
        border:2px groove blue;
        width: 300px;
        height: 300px;
        overflow-y: hidden;
        overflow-x:scroll;
        }
.konten {
        padding:5px;
        width:320px;
        background:rgb(241 241 241 / 75%);
        }
</style>

Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen. Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.Ini contoh teks kalimat dalam paragraf sebagai konten yang dimuat dalam elemen.

Komentar

Posting Komentar