Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)

Menjadi Web Developer

Terkadang kita ingin membuat sebuah content web (isi) yang dibatasi oleh sebuah kotak. Jadi ketika content/isi melebihi kotak tersebut, maka tidak akan ditampilkan (disembunyikan). Disinila fungsi dari CSS dengan script Overflow-nya. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada penggunaan fungsi overflow biasanya ada 4 alternatif yang bisa kita gunakan:

    overflow:auto
    overflow:scroll
    overflow:hidden
    overflow:display

Buat Style seperti ini:

div.scroll {
 background-color: #00FFFF;
 width: 100px;
 height: 100px;
 overflow: scroll;
}

div.hidden {
 background-color: #00FF00;
 width: 100px;
 height: 100px;
 overflow: hidden;
}

Selanjutnya di HTML buat seperti ini:

<p>overflow:scroll</p>
<div class=”scroll”>You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class=”hidden”>You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

Silahkan lihat perbedaanya, yang satu ada scrollnya yang satu disembunyikan scrollnya.