Fungsi Overflow-x:hidden pada CSS

Hallo teman-teman? balik lagi pada tutorial dumet school, kemarin kita sudah belajar tentang fungsi overflow-y pada CSS, nah sekarang kita akan belajar overflow-x pada CSS, sebenarnya fungsinya sama dengan fungsi overflow-y namun ini adalah kebalikannya dari overflow-y.
Hanya saja kalau overflow-y berpusat pada sumbu y di matematika, kalau overflow-x berdasarkan sumbu x di matematika.
Oke kita langsung saja praktekan, silahkan teman-teman buat folder dan ketikan script berikut:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div><p style="width:240px">
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>

Coba sekarang tambahkan script CSS berikut :

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

Maka hasilnya akan seperti berikut :

Hasilnya paragraf akan menembus area yang telah kita tetapkan lebarnya, sekarang coba tambahkan script CSS berikut :

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

Maka hasilnya akan seperti berikut :

Hasilnya paragraf yang tadinya melebihi area yang kita buat akan otomatis terhidden atau tertutup karna sumbu x arahnya horizontal.

Bagaimana? cukup mudah kan?

Cukup sekian artikel kali ini, semoga bermanfaat, terimakasih.

Kategori