CSS overflow

• In   



CSS overflow

Nilai Keterangan
visible Ini akan membuat limpahan terlihat. Ini default
hidden Ini akan membuat limpahan terpotong, dan sebagian bersembunyi atau tidak terlihat
scroll Ini akan membuat limpahan terpotong, dan sebagian bisa dilihat dengan scroll-bar
auto Jika konten belum penuh dia akan tampil biasa. Dan jika konten sudah penuh dengan automatis menampilkan scroll-bar

Buka Notepad untuk mempraktekkannya, copy-paste kode ini :
<html>
<head>
<style type="text/css">
.satu {
background-color:#FFE5FF;
width:100px;
}

.dua {
background-color:#FFE0B3;
width:100px;
height:100px;
overflow:hidden;
}

.tiga {
background-color:#E5E5FF;
width:100px;
height:100px;
overflow:scroll;
}

.empat {
background-color:#FFFFE5;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>

<body>
<p>visible - digunakan atau tidak sama saja, kecuali mewarisi. Lebih baik tidak menggunakan properti height.</p>
<div class="satu">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>hidden</p>
<div class="dua">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>scroll</p>
<div class="tiga">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>auto pertama</p>
<div class="empat">contoh contoh contoh contoh</div>

<p>auto kedua</p>
<div class="tiga">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>
</body>
</html>

Menu Nano di Halaman utama juga menggunakan trik overflow.