Properti overflow
pada CSS dapat digunakan untuk mengatur konten yang terlalu besar atau melewati batas yang telah ditentukan untuk dimasukkan ke dalam suatu area.
CSS overflow
Properti overflow
dapat menentukan suatu konten apakah akan dipotong atau menambahkan scrollbar ketika konten terlalu besar atau tidak cukup untuk dimasukan ke area yang telah ditentukan.
Berikut merupakan beberapa nilai properti overflow
, yaitu:
visible
– Default. Konten tidak terpotong. Konten akan dimuat di luar kotak elemen.- hidden – Konten terpotong, dan sisa konten tidak akan terlihat/disembunyikan.
scroll
– Konten terpotong, dan scrollbar ditambahkan untuk melihat sisa konten.auto
– Mirip denganscroll
, tetapi akan menambahkan scrollbar hanya jika diperlukan.
Properti overflow: visible
Secara default, nilai overflow adalah visible
, artinya tidak terpotong dan akan dimuat di luar kotak elemen.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>overflow: visible</h2>
<p>Secara default, overflow: visible, artinya konten tidak terpotong. Konten akan dimuat di luar kotak elemen.</p>
<div>Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.</div>
</body></html>
Properti overflow: hidden
Dengan nilai hidden
, overflow akan membuat konten terpotong, dan sisa konten lainnya tidak terlihat / disembunyikan.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>overflow: hidden</h2>
<p>Dengan overflow: hidden, konten terpotong, dan sisa konten tidak akan terlihat/disembunyikan.</p>
<p>Coba hapus properti overflow untuk memahami cara kerjanya.</p>
<div>Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.</div>
</body></html>
Properti overflow: scroll
Mengubah nilai ke scroll
, konten akan dipotong dan scrollbar ditambahkan untuk memuat kelebihan konten di dalam kotak. Perhatikan pada contoh di bawah ini akan menambahkan scrollbar baik secara horizontal maupun vertikal (bahkan jika tidak membutuhkannya).
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>overflow: scroll</h2>
<p>Dengan nilai overflow: scroll, konten terpotong, dan scrollbar ditambahkan untuk melihat sisa konten.</p>
<div>Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.</div>
</body></html>
Properti overflow: auto
Nilai auto
mirip dengan scroll
, tetapi menambahkan scrollbar hanya jika diperlukan ketika konten terlalu besar dan tidak mencukupi kotak.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<h2>overflow: auto</h2>
<p>Mirip dengan scroll, tetapi akan menambahkan scrollbar hanya jika diperlukan</p>
<div>Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.</div>
</body></html>
Properti overflow-x dan overflow-y
Properti overflow-x
dan overflow-y
dapat menentukan apakah akan overflow konten berpengaruh hanya secara horizontal atau secara vertikal (atau keduanya):
overflow-x
dapat menentukan nilai overflow dari posisi kiri/kanan konten.
overflow-y
dapat menentukan nilai overflow dari posisi atas/bawah konten.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>overflow-x dan overflow-y</h2>
<p>Anda juga dapat mengubah overflow konten secara horizontal atau vertikal.</p>
<p>overflow-x menentukan nilai overflow dari posisi kiri/kanan konten.</p>
<p>overflow-y menentukan nilai overflow dari posisi atas/bawah konten.</p>
<div>Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.</div>
</body></html>
Referensi Semua Properti Overflow CSS
- overflow : Dapat menentukan apa yang terjadi ketika konten terlalu besar atau tidak cukup didalam area kotak.
- overflow-wrap : Dapat menentukan apakah browser dapat memotong baris ketika kata-kata dalam elemen terlalu panjang dan melebihi wadahnya.
- overflow-x : Dapat menentukan apa yang harus dilakukan terhadap posisi kiri/kanan konten jika melebihi area konten.
- overflow-y : Dapat menentukan apa yang harus dilakukan terhadap posisi atas/bawah konten jika melebihi area konten.
Properti CSS overflow
Contoh
Pada contoh ini akan menampilkan properti overflow dengan nilai yang berbeda:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: clip;
}
div.ex5 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>Properti overflow</h1>
<p>Properti overflow menentukan suatu konten apakah akan dipotong atau menambahkan scrollbar ketika konten terlalu besar atau tidak cukup untuk dimasukan ke area yang telah ditentukan.</p>
<h2>overflow: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: clip</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: visible</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body></html>
Definisi dan Penggunaan
Properti overflow
menentukan apa yang akan terjadi jika konten terlalu besar dari area kotak.
Properti ini menentukan apakah akan memotong konten atau menambahkan scrollbar saat konten elemen terlalu besar untuk muat di area tertentu.
Properti CSS overflow-wrap
Contoh
Mengizinkan browser untuk memecah baris untuk kata-kata dalam suatu elemen yang terlalu panjang:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
border: 1px solid #000000;
}
div.a {
overflow-wrap: normal;
}
div.b {
overflow-wrap: break-word;
}
div.c {
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<h1>Properti overflow-wrap</h1>
<h2>overflow-wrap: normal (default)</h2>
<div class="a">Div ini berisi kata yang sangat panjang: thisisveryveryveryverylongword. Kata yang panjang tidak akan pecah dan membungkus ke baris berikutnya.</div>
<h2>overflow-wrap: break-word</h2>
<div class="b">Div ini mengandung kata yang sangat panjang: thisisveryveryveryveryverylongword. Kata yang panjang akan terputus dan terbungkus ke baris berikutnya.</div>
<h2>overflow-wrap: anywhere</h2>
<div class="c">Div ini mengandung kata yang sangat panjang: thisisveryveryveryveryverylongword. Kata yang panjang akan terputus dan terbungkus ke baris berikutnya.</div>
</body></html>
Definisi dan Penggunaan
Properti overflow-wrap
dapat menentukan apakah apakah browser dapat memotong baris ketika kata-kata dalam suatu elemen terlalu panjang dan melebihi wadahnya.
Nilai properti
- normal : Kata-kata panjang tidak akan terpotong, meski meluap dari wadah. Ini default.
- anywhere : Kata-kata panjang akan dipecah jika meluap dari wadah.
- break-word : Sama seperti anywhere
- initial : Mengatur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari nilai element.ault induknya.
Properti CSS overflow-x
Contoh
Pada contoh di bawah ini akan menampilkan nilai properti overflow-x yang berbeda:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 40px;
overflow-x: scroll;
}
div.ex2 {
background-color: lightblue;
width: 40px;
overflow-x: hidden;
}
div.ex3 {
background-color: lightblue;
width: 40px;
overflow-x: auto;
}
div.ex4 {
background-color: lightblue;
width: 40px;
overflow-x: visible;
}
</style>
</head>
<body>
<h1>Properti overflow-x</h1>
<p>Properti overflow-x menentukan apakah akan memotong konten, menambahkan scrollbar, atau menampilkan konten yang terlalu besar pada bagian di tepi kiri dan kanan.</p>
<h2>overflow-x: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>
<h2>overflow-x: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elite..</div>
<h2>overflow-x: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>
<h2>overflow-x: visible (default)</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>
</body></html>
Definisi dan Penggunaan
Properti overflow-x
dapat menentukan apakah akan memotong konten, menambahkan scrollbar, atau menampilkan konten yang terlalu besar pada bagian di tepi kiri dan kanan.
Nilai properti
- visible :Konten tidak terpotong, dan mungkin memuat di luar tepi kiri dan kanan. Ini default.
- hidden : Konten terpotong dan tidak ada mekanisme scrollbar yang disediakan.
- scroll : Konten dipotong dan scrollbar disediakan.
- auto : Dapat menyebabkan scrollbar dapat disediakan untuk elemen yang terlalu besar.
- initial : Mengatur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Properti CSS overflow-y
Contoh
Pada contoh di bawah ini menampilkan nilai properti overflow-y yang berbeda:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
height: 40px;
width: 200px;
overflow-y: scroll;
}
div.ex2 {
background-color: lightblue;
height: 40px;
width: 200px;
overflow-y: hidden;
}
div.ex3 {
background-color: lightblue;
height: 40px;
width: 200px;
overflow-y: auto;
}
div.ex4 {
background-color: lightblue;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h1>Properti overflow-y</h1>
<p>Properti overflow-y menentukan apakah akan memotong konten, menambahkan scrollbar, atau menampilkan konten yang terlalu besar pada bagian di tepi atas dan bawah.</p>
<h2>overflow-y: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>
<h2>overflow-y: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>
<h2>overflow-y: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>
<h2>overflow-y: visible (default)</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>
</body></html>
Definisi dan Penggunaan
Properti overflow-y
dapat menentukan apakah akan memotong konten, menambahkan scrollbar, atau menampilkan konten yang terlalu besar pada bagian di tepi atas dan bawah.
Nilai properti
- visible :Konten tidak terpotong, dan mungkin memuat di luar tepi atas dan bawah. Ini default.
- hidden : Konten terpotong dan tidak ada mekanisme scrollbar yang disediakan.
- scroll : Konten dipotong dan scrollbar disediakan.
- auto : Dapat menyebabkan scrollbar dapat disediakan untuk elemen yang terlalu besar.
- initial : Mengatur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Tutorial sebelumnya : Properti Z-Index CSS
Tutorial setelahnya : Properti Float CSS
Semua Tutorial CSS : Tutorial CSS