CSS - Overflow: Mengawal Kandungan

Hai di sini, para ahli CSS masa depan! Hari ini, kita akan melihat dunia yang penuh magi CSS overflow. Sebagai guru komputer di lingkungan yang ramah, saya di sini untuk menghidangkan anda dalam perjalanan yang menarik ini. Percayalah, pada akhir pelajaran ini, anda akan penuh dengan pengetahuan (tidak disengaja dipunsangkan).

Apa Itu CSS Overflow?

Sebelum kita masuk ke dalam, mari kita fahami apa maksud "overflow" dalam konteks CSS. Bayangkan anda ada sebuah kotak kecil, dan anda mencoba memasukkan seekor beruang gajah besar ke dalamnya. Apa yang terjadi? Beruang gajah itu tidak memasukkan, kan? Itu betul yang terjadi dengan kandungan dalam reka bentuk web kadang-kadang. CSS overflow adalah cara kita memberitahu browser apa yang harus dilakukan ketika kandungan terlalu besar untuk wadahnya.

CSS overflow - Dengan Nilai visible dan hidden

Ayo mulai dari dasar. Properti CSS overflow memiliki dua nilai dasar: visible dan hidden.

visible (Default)

Ini adalah tingkah laku default. Itu seperti mengatakan, "Biarkan semuanya muncul!"

<div class="overflow-visible">
<p>Ini adalah paragraf panjang yang akan meluap ke luar wadahnya.</p>
</div>

.overflow-visible {
width: 100px;
height: 100px;
border: 1px solid hitam;
overflow: visible;
}

Dalam contoh ini, teks akan keluar dari kotak, terlihat oleh semua. Itu seperti tangannya dan kaki beruang gajah itu menembus kotak.

hidden

Nilai ini seperti sihir - ia membuat overflow menghilang!

<div class="overflow-hidden">
<p>Ini adalah paragraf panjang yang akan disembunyikan jika ia meluap.</p>
</div>

.overflow-hidden {
width: 100px;
height: 100px;
border: 1px solid hitam;
overflow: hidden;
}

Di sini, semua kandungan yang tidak muat di dalam kotak 100x100 piksel akan dipotong, disembunyikan dari pandangan. Itu seperti kita memasukkan beruang gajah ke dalam kotak dan menutup penutupnya rapat!

CSS overflow - Nilai clip

Nilai clip adalah seperti saudara keras hidden. Ia tidak hanya menyembunyikan overflow, tetapi juga melarang semua penggulungan, termasuk penggulungan programmatik.

<div class="overflow-clip">
<p>Kandungan ini akan dipotong tanpa opsi penggulungan manapun.</p>
</div>

.overflow-clip {
width: 100px;
height: 100px;
border: 1px solid hitam;
overflow: clip;
}

Dengan clip, itu seperti kita tidak hanya menutup kotak tetapi menutupnya rapat.

CSS overflow - Dengan Nilai scroll dan auto

Sekarang, mari kita lihat dua nilai yang memberikan kita fleksibilitas: scroll dan auto.

scroll

Nilai ini selalu menambahkan scrollbar, baik itu diperlukan atau tidak.

<div class="overflow-scroll">
<p>Kandungan ini mungkin memerlukan penggulungan, atau mungkin tidak!</p>
</div>

.overflow-scroll {
width: 100px;
height: 100px;
border: 1px solid hitam;
overflow: scroll;
}

Itu seperti memberikan kotak Anda set roda, hanya dalam kasus Anda perlu menggerakkan sesuatu.

auto

Ini adalah opsi cerdas. Ia hanya menambahkan scrollbar jika diperlukan.

<div class="overflow-auto">
<p>Kandungan ini hanya akan mendapat scrollbar jika ia meluap.</p>
</div>

.overflow-auto {
width: 100px;
height: 100px;
border: 1px solid hitam;
overflow: auto;
}

Pikirkan auto seperti seorang teman yang membantu yang hanya menawarkan membawa barang belanjaan Anda jika tangan Anda penuh.

Properti CSS Overflow - Properti Terkait

Sekarang kita telah menguasai dasar-dasar, mari kita lihat beberapa properti terkait yang memberikan kita kendali lebih banyak:

Properti	Deskripsi	Contoh
overflow-x	Mengawal overflow horizontal	overflow-x: scroll;
overflow-y	Mengawal overflow vertikal	overflow-y: hidden;
overflow-wrap	Menentukan apakah kata harus dipotong saat kandungan meluap wadah penggulungan	overflow-wrap: break-word;
text-overflow	Menentukan bagaimana kandungan yang meluap yang tidak ditampilkan harus disinyalikan kepada pengguna	text-overflow: ellipsis;

Ayo lihat ini dalam aksi:

<div class="overflow-fancy">
<p>Ini adalah paragraf yang sangat panjang dengan beberapa kata yang sulit dipotong yang sangat panjang.</p>
</div>

.overflow-fancy {
width: 200px;
height: 100px;
border: 1px solid hitam;
overflow-x: scroll;
overflow-y: hidden;
overflow-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
}

Dalam contoh ini:

• Overflow horizontal akan menunjukkan scrollbar
• Overflow vertikal akan disembunyikan
• Kata panjang akan dipotong untuk memenuhi lebar
• Jika teks meluap secara horizontal, ia akan berakhir dengan tiga titik (...)

Itu seperti kita memberikan kotak Anda pisau瑞士 army knife kendali kandungan!

Kesimpulan

Dan di sana Anda ada, teman-teman! Kita telah menjelajahi dunia yang meluap CSS overflow. Dari menyembunyikan dan menunjukkan ke kendali kandungan yang canggih, Anda sekarang memiliki alat untuk mengelola kandungan seperti seorang pro.

Ingat, desain web tentang menciptakan pengalaman pengguna yang bagus. Kadang-kadang itu berarti menunjukkan segala sesuatu, kadang-kadang itu berarti menyembunyikan kelebihan, dan kadang-kadang itu berarti memberikan pengguna kekuatan untuk menjelajahi sendiri.

Saat Anda mempraktikkan teknik ini, Anda akan mengembangkan intuisi untuk kapan menggunakan metode mana. Dan siapa tahu? Mungkin suatu hari Anda akan mengajarkan generasi berikutnya tentang keajaiban CSS overflow!

Sampai jumpa lagi, jaga kandungan Anda dan biarkan kreativitas Anda meluap!

Credits: Image by storyset