Menangani Overflow Pada Elemen HTML

Untuk kondisi tertentu, ada kemungkinan value yang disimpan dalam suatu komponen HTML akan keluar dari batas yang sudah ditentukan. Contohnya seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Sehingga hasilnya mungkin akan seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Untuk menanganinya, kita dapat menggunakan syntx Overflow, sehingga kelebihan text yang terdapat didalam element HTML tersebut disembunyikan, atau dibuatkan scroll sehingga tidak mengganggu keberadaan element lain.

Contohnya seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Sehingga hasilnya mungkin akan seperti ini :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Beberapa properties yang dapat dipasangkan dengan syntax overflow adalah sebagai berikut :

.classname {
    overflow:visible;
    overflow:hidden;
    overflow:scroll;
    overflow:auto;
    overflow:inherit;
}

Beberapa contoh penggunaanya :
Contoh 1:

.classname {
    overflow:hidden;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Contoh 2:

.classname {
    overflow:scroll;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Contoh 3:

.classname {
    overflow:auto;
}

Hasil :

Iniadalahtextyangterlalupanjangsehinggamenyebabkanoverflow.

Untuk mengatur posisi scroll, Anda mungkin bisa menambahkan properties "-x" atau "-y" setelah syntax overflow.
Contohnya :

.class {
    overflow:[value]; // Akan membuat scroll sesuai kebutuhan elemen;
    overflow-x:[value]; // Akan membuat scroll jika overflow ke arah horizontal;
    overflow-y:[value]; // Akan membuat scroll jika overflow ke arah vertical;
}