Fungsi Overflow-y:hidden pada CSS

Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan belajar tentang jenis jenis overflow, pada tutorial kali ini kita akan belajar fungsi overflow-y pada CSS.

Fungsi dari overflow sendiri ialah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Nah mungkin untuk lebih jelasnya kita langsung saja praktekkan ya teman-teman.

Silahkan buat file dan ketikan script berikut :

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div><p>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' 
</p></div>

</body>
</html>

Jika sudah coba silahkan tambahkan script CSS berikut :

<style> 
div {
    width: 110px;
    height: 110px;
    border: 1px solid black;

}
</style>

Hasilnya akan tembus keluar dari div yang telah kita tentukan lebar dan tingginya :

Nah sekarang coba tambahkan properties berikut :

<style> 
div {
    width: 110px;
    height: 110px;
    border: 1px solid black;
    overflow-y: hidden;
}
</style>

Maka hasilnya akan seperti berikut:

Fungsi dari si overflow-y adalah menyembunyikan element secara vertical, gimana teman-teman??

Cukup mudah kan,, oke cukup dulu untuk tutorial kali ini,semoga bermanfaat, terimakasih..

Kategori