Overflow ~ Pemrograman dan Teknologi

Saat mengatur tinggi / height dan lebar / width mungkin ada yang terpikir bagaimana jika ternyata area yang dibutuhkan tulisan tidak sesuai dengan ukuran dari area tempat tulisan tersebut karena terlalu sempit. Bagaimana jika kita ingin menghilangkan sebagian dari isi elemen HTML yang melewati lebar atau tinggi elemen? Caranya adalah dengan menggunakan properti overflow seperti contoh di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku1{
            width : 250px;
            height : 300px ;
            background : yellow;
        }
        .styleku2{
            width : 280px;
            height : auto;
            background : blue;
        }
    </style>
</HEAD>
<BODY>
<h2>Belajar HTML</h2>
    <div class="styleku1">
        <div class="styleku2">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
            <p>Ini paragraf ke-2</p>
        </div>
        <p>Ini paragraf ke-3</p>
        <p>Ini paragraf ke-4</p>
        <p>Ini paragraf ke-5</p>
        <p>Ini paragraf ke-6</p>
        <p>Ini paragraf ke-7</p>
        <p>Ini paragraf ke-8</p>
    </div>
</BODY>
</HTML>

Pada contoh di atas, ukuran width dan height dari class "styleku2" terlalu sempit sehingga sebagian tulisan keluar area yang disediakan. Untuk menyembunyikan bagian yg melewati area tersebut kita bisa menggunakan nilai hidden pada properti overflow.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku1{
            width : 250px;
            height : 300px ;
            background : yellow;
            overflow : hidden;
        }
        .styleku2{
            width : 280px;
            height : auto;
            background : blue;
        }
    </style>
</HEAD>
<BODY>
<h2>Belajar HTML</h2>
    <div class="styleku1">
        <div class="styleku2">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
            <p>Ini paragraf ke-2</p>
        </div>
        <p>Ini paragraf ke-3</p>
        <p>Ini paragraf ke-4</p>
        <p>Ini paragraf ke-5</p>
        <p>Ini paragraf ke-6</p>
        <p>Ini paragraf ke-7</p>
        <p>Ini paragraf ke-8</p>
    </div>
</BODY>
</HTML>

Nilai-Nilai yang Bisa Diberikan

Pada contoh di atas properti overflow bernilai hidden sehingga bagian child dari class "styleku1" yang melewati area parentnya tidak tampak. Selain hidden ada beberapa nilai yang bisa diberikan pada properti overflow. Nilai-nilai tersebut yaitu :

visible : terlihat
hidden : tersembunyi
scroll : bisa di-scroll
auto : otomatis
initial : nilai bawaan / default
inherit : sama dengan nilai properti yang sama dan dimiliki parent

Overflow-x dan Overflow-y

Selain overflow yang mengatur tampilan area yang melewati sisi kanan dan sisi bawah, kita juga bisa menggunakan overflow-x dan overflow-y. Penggunaan kedua properti tersebut bisa dilihat di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku1{
            width : 250px;
            height : 300px ;
            background : yellow;
            overflow-x:hidden;
            overflow-y:scroll;
        }

        .styleku2{
            width : 280px;
            height : auto;
            background : blue;
        }
    </style>
</HEAD>
<BODY>
<h2>Belajar HTML</h2>
    <div class="styleku1">
        <div class="styleku2">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
            <p>Ini paragraf ke-2</p>
        </div>
        <p>Ini paragraf ke-3</p>
        <p>Ini paragraf ke-4</p>
        <p>Ini paragraf ke-5</p>
        <p>Ini paragraf ke-6</p>
        <p>Ini paragraf ke-7</p>
        <p>Ini paragraf ke-8</p>
    </div>
</BODY>
</HTML>

Perbedaan nilai hidden dan scroll bisa kalian lihat pada contoh di atas. Overflow-x menggunakan nilai hidden sehingga sisi kiri dari teks tidak terlihat tapi tidak bisa discroll. Nilai overflow-y pada contoh di atas adalah scroll yang memberikan scrollbar pada elemen HTML.

Browser smarthphone mungkin tidak memperlihatkan scrollbar. Tapi, kalian seharusnya kalian masih bisa melakukan scrolling.