Fungsi Overflow-x:hidden pada CSS
Hallo teman-teman? balik lagi di panduan Source Code Aplikasi, kemarin kita telah belajar mengenai manfaat overflow-y di CSS, nah kini kita akan belajar overflow-x di CSS, sebetulnya fungsinya sama dengan manfaat overflow-y namun ini yaitu kebalikannya dari overflow-y.
Hanya saja kalau overflow-y berpusat di sumbu y di matematika, kalau overflow-x menurut sumbu x di matematika.
Oke kita seketika saja praktekan, silahkan teman-teman bikin 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 kini tambahkan script CSS berikut :
<style>
div {
width: 110px;
border: 1px solid black;
}
</style>
Karenanya hasilnya akan seperti berikut :
Hasilnya paragraf akan menembus area yang telah kita tetapkan lebarnya, kini coba tambahkan script CSS berikut :
<style>
div {
width: 110px;
border: 1px solid black;
overflow-x:hidden;
}
</style>
Karenanya hasilnya akan seperti berikut :
Hasilnya paragraf yang tadinya melebihi area yang kita bikin akan otomatis terhidden atau tertutup karna sumbu x arahnya horizontal.
Bagaimana? lumayan gampang kan?
Lumayan sekianlah artikel kali ini, semoga bermanfaat, terimakasih.
Sumber https://kursuswebsite.org
