Hay Day Clone v1.35.114 (June 19, 2017) versi terbaru --> klik di sini

Mengenal CSS Overflow

//

Apabila kita akan menuliskan konten pada suatu kertas yang terbatas ukurannya, akan tetapi jumlah konten tersebut tidak dapat ditampung seluruhnya oleh kertas tersebut. Analog dengan itu, dalam dunia web akan berakibat seperti di bawah ini:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Tampak bahwa isi konten keluar dari kotak. Untuk mengatasi hal tersebut, maka kita gunakan properti CSS Overflow. Secara default nilai Overflow ini adalah visible :)

.kotak {overflow:visible;}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



.kotak {overflow:hidden;}

.kotak {overflow:auto;}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.kotak {overflow:scroll;}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

***


Semoga bermanfaat dan menambah pengetahuan :)

0 Comments

Post a Comment

Silakan tulis komentar atau pertanyaan kamu di sini. Komentar yang berbau spam, promosi dan sebagainya akan segera saya hapus. Terima kasih.

Cancel Reply