Dito PriwantoPada seri Belajar CSS bagian 26, kita telah mempelajari berbagai properti yang digunakan untuk mengatur ukuran, posisi, hingga tata letak elemen pada halaman web. Namun, dalam praktiknya sering muncul kondisi ketika isi sebuah elemen lebih besar daripada ruang yang tersedia. Akibatnya, teks, gambar, atau komponen lain bisa keluar dari batas elemen dan membuat tampilan website menjadi kurang rapi.
Untuk mengatasi masalah tersebut, CSS menyediakan properti overflow. Dengan properti ini, Anda dapat mengatur bagaimana browser menangani konten yang melebihi ukuran elemen, apakah disembunyikan, ditampilkan, atau dibuat dapat digulir (scroll).
Pada seri Belajar CSS Bagian 27 ini, kita akan mengenal apa itu CSS Overflow, fungsi setiap nilainya, serta contoh penerapannya agar layout website tetap rapi dan nyaman digunakan di berbagai ukuran layar.
Apa Itu CSS Overflow?
CSS Overflow adalah properti CSS yang berfungsi mengatur bagaimana konten ditampilkan ketika ukurannya lebih besar dari elemen induknya (container). Dengan kata lain, Overflow menentukan apa yang harus dilakukan browser jika isi sebuah elemen tidak lagi muat di dalam ruang yang tersedia.
Misalnya, Anda memiliki sebuah container <div> berukuran 200×200 piksel, tetapi teks di dalamnya membutuhkan ruang 300×400 pixel. Nah, CSS Overflow inilah yang akan memutuskan apakah konten tersebut dipotong, disembunyikan, atau ditampilkan dengan scroll bar.
Contoh penulisan kode css overflow :
selector {
overflow: nilai;
}Mengapa CSS Overflow Penting?
Dalam pengembangan desain tampilan website, biasanya konten memiliki ukuran yang lebih luas dengan container-nya, terutama ketika konten bersifat dinamis seperti teks dari database, input dari pengguna, menampilkan tabel yang memiliki data cukup banyak, dan lain sebagainya. Berikut beberapa fungsi css overflow;
- Menjaga tata letak (layout) tetap rapi: Mencegah konten keluar dari batas desain yang sudah ditentukan.
- Meningkatkan pengalaman pengguna (UX): Dengan menampilkan scroll bar hanya ketika dibutuhkan, tampilan lebih bersih dan intuitif.
- Fleksibilitas desain: Memungkinkan pembuatan komponen seperti sidebar scrollable, tabel data, modal, dan card dengan konten dinamis.
- Kompatibilitas antar perangkat: Membantu konten tetap terbaca dengan baik di berbagai ukuran layar.
Cara Kerja CSS Overflow
Property overflow hanya berfungsi pada elemen block-level (seperti < div >, < section >, < article >) yang memiliki tinggi (height) yang ditentukan secara eksplisit, baik dalam piksel, em, rem, persentase, maupun max-height. Tanpa nilai tersebut, elemen akan selalu mengembang mengikuti konten.
Contoh kode
/* Overflow TIDAK akan bekerja tanpa height */
.box {
overflow: hidden; /* tidak efektif */
}
/* Overflow AKAN bekerja dengan height */
.box {
height: 200px;
overflow: hidden; /* efektif */
}Jenis-Jenis Property CSS Overflow
Berikut jenis properti css align yang sering digunakan:
- overflow: visible : nilai default dari semua elemen HTML Artinya, konten yang lebih besar dari kontainer akan tetap ditampilkan di luar batas elemen, tanpa terpotong dan tanpa scroll bar.
- overflow: hidden : Nilai hidden akan memotong (clip) semua konten yang melebihi batas elemen. Konten yang terpotong tidak bisa dilihat oleh pengguna, tidak ada scroll bar yang muncul.
- overflow: scroll : Nilai scroll akan selalu menampilkan scroll bar, baik horizontal maupun vertikal, meskipun apakah kontennya lebih besar dari kontainer atau tidak.
- overflow: auto : Nilai auto adalah yang paling fleksibel, scroll bar hanya muncul jika konten benar-benar melebihi batas kontainer. Jika tidak melebihi batas maka tampilan akan bersih tanpa scroll bar.
- overflow: clip : Nilai clip mirip dengan hidden, perbedaannya konten yang melebihi batas kontainer akan dipotong. Namun perbedaan utamanya adalah nilai clip tidak membentuk Block Formatting Context (BFC) baru dan tidak mengizinkan scrolling secara programatik (via JavaScript).
Property Turunan: overflow-x dan overflow-y : CSS overflow juga menyediakan property yang lebih spesifik untuk mengontrol overflow secara terpisah yaitu sumbu horizontal (overflow-x) dan vertikal (overflow-y).
Contoh Implementasi kedalam kode html
Berikut adalah contoh HTML dan CSS lengkap yang menggabungkan berbagai properti overflow :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS Overflow</title>
<style>
/* Reset dasar */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
padding: 40px 20px;
color: #333;
}
h1 {
text-align: center;
margin-bottom: 40px;
color: #1a1a2e;
}
h2 {
margin-bottom: 10px;
font-size: 1rem;
color: #555;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
/* Gaya dasar untuk semua kotak demo */
.kotak {
width: 100%;
height: 120px;
padding: 12px;
border-radius: 8px;
font-size: 0.875rem;
line-height: 1.6;
border: 2px solid;
}
/* 1. overflow: visible */
.visible {
overflow: visible;
background-color: #dbeafe;
border-color: #3b82f6;
}
/* 2. overflow: hidden */
.hidden {
overflow: hidden;
background-color: #fef9c3;
border-color: #eab308;
}
/* 3. overflow: scroll */
.scroll {
overflow: scroll;
background-color: #fce7f3;
border-color: #ec4899;
}
/* 4. overflow: auto */
.auto {
overflow: auto;
background-color: #dcfce7;
border-color: #22c55e;
}
/* 5. overflow-x: auto (untuk tabel) */
.tabel-wrapper {
width: 100%;
overflow-x: auto;
background-color: #ede9fe;
border: 2px solid #8b5cf6;
border-radius: 8px;
}
.tabel-wrapper table {
min-width: 600px;
border-collapse: collapse;
}
.tabel-wrapper th,
.tabel-wrapper td {
padding: 10px 16px;
border: 1px solid #c4b5fd;
white-space: nowrap;
font-size: 0.875rem;
}
.tabel-wrapper th {
background-color: #8b5cf6;
color: white;
}
/* 6. text-overflow: ellipsis */
.ellipsis-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.ellipsis {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 14px;
background-color: #ffedd5;
border: 2px solid #f97316;
border-radius: 8px;
font-size: 0.875rem;
}
/* 7. Gambar dengan overflow: hidden + border-radius */
.gambar-bulat {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
border: 3px solid #06b6d4;
}
.gambar-bulat img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Label section */
.section {
margin-bottom: 40px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.section > h2 {
font-size: 1.2rem;
color: #1a1a2e;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #ddd;
}
.label {
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
color: #888;
margin-bottom: 4px;
}
</style>
</head>
<body>
<h1>Demo CSS Overflow</h1>
<!-- Demo nilai-nilai overflow dasar -->
<div class="section">
<h2>1. Perbandingan Nilai Overflow Dasar</h2>
<div class="grid">
<div>
<p class="label">overflow: visible (default)</p>
<div class="kotak visible">
Ini adalah teks yang sangat panjang dan akan meluap keluar dari batas kotak karena menggunakan overflow: visible. Teks ini terus berlanjut melewati batas kotak.
</div>
</div>
<div>
<p class="label">overflow: hidden</p>
<div class="kotak hidden">
Ini adalah teks yang sangat panjang dan akan dipotong oleh browser karena menggunakan overflow: hidden. Konten yang meluap tidak akan terlihat sama sekali oleh pengguna.
</div>
</div>
<div>
<p class="label">overflow: scroll</p>
<div class="kotak scroll">
Ini adalah teks yang sangat panjang dan bisa di-scroll oleh pengguna karena menggunakan overflow: scroll. Scroll bar selalu ditampilkan meskipun konten tidak meluap.
</div>
</div>
<div>
<p class="label">overflow: auto</p>
<div class="kotak auto">
Ini adalah teks yang sangat panjang. Dengan overflow: auto, scroll bar hanya muncul ketika konten benar-benar melebihi batas kotak. Ini adalah pilihan yang paling direkomendasikan.
</div>
</div>
</div>
</div>
<!-- Demo tabel responsif dengan overflow-x -->
<div class="section">
<h2>2. Tabel Responsif dengan overflow-x: auto</h2>
<div class="tabel-wrapper">
<table>
<thead>
<tr>
<th>Nama Produk</th>
<th>Kategori</th>
<th>Harga</th>
<th>Stok</th>
<th>Tanggal Masuk</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop Gaming Asus ROG</td>
<td>Elektronik</td>
<td>Rp 18.500.000</td>
<td>12 unit</td>
<td>10 Juni 2025</td>
<td>Tersedia</td>
</tr>
<tr>
<td>Mechanical Keyboard Keychron</td>
<td>Aksesori</td>
<td>Rp 1.200.000</td>
<td>34 unit</td>
<td>15 Juni 2025</td>
<td>Tersedia</td>
</tr>
<tr>
<td>Monitor 4K LG UltraWide</td>
<td>Elektronik</td>
<td>Rp 7.800.000</td>
<td>0 unit</td>
<td>01 Mei 2025</td>
<td>Habis</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Demo text-overflow: ellipsis -->
<div class="section">
<h2>3. Text Overflow dengan Ellipsis</h2>
<div class="ellipsis-container">
<div class="ellipsis">Judul artikel yang sangat panjang: Panduan Lengkap Belajar CSS dari Nol hingga Mahir untuk Pemula</div>
<div class="ellipsis">Nama pengguna dengan panjang karakter yang melebihi batas container: Muhammad Farhan Hidayatullah Al-Ghifari</div>
<div class="ellipsis">URL panjang: https://www.contohwebsite.com/blog/artikel/css-overflow-panduan-lengkap-2025</div>
</div>
</div>
<!-- Demo gambar bulat dengan overflow: hidden -->
<div class="section">
<h2>4. Gambar Bulat dengan overflow: hidden + border-radius</h2>
<div class="gambar-bulat">
<!-- Ganti src dengan URL gambar nyata -->
<img
src="https://picsum.photos/120/120?random=42"
alt="Foto profil pengguna"
>
</div>
<p style="text-align:center; margin-top: 10px; font-size: 0.85rem; color: #888;">
Gambar dipotong menjadi lingkaran menggunakan <code>overflow: hidden</code> + <code>border-radius: 50%</code>
</p>
</div>
</body>
</html>Dan ketika di akses dengan browser, tampilannya akan lebih menarik dan rapi. Berikut contohnya:
Penutup
CSS Overflow adalah salah satu properti penting yang membantu mengatur tampilan konten ketika ukurannya melebihi elemen pembungkus (container). Dengan memanfaatkan properti ini, Anda dapat membuat layout website tetap rapi, responsif, dan nyaman digunakan tanpa mengorbankan pengalaman pengguna.
Sampai di sini, Anda telah mempelajari cara kerja CSS Overflow beserta fungsi setiap nilainya. Pada seri Belajar CSS berikutnya, kita akan membahas materi lain yang tidak kalah penting untuk membantu Anda membangun tampilan website yang lebih modern dan profesional. Jadi, jangan lewatkan lanjutan seri Belajar CSS dari Rumahweb.
