ID (Indonesia) Translation

CSS - Overflow: Menungkap Kontrol Konten

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mandiri ke dalam dunia magis CSS overflow. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengorbit Anda melalui perjalanan yang menarik ini. Percayalah, pada akhir pelajaran ini, Anda akan penuh dengan pengetahuan (itu cuma permainan kata saja)!

Apa Itu CSS Overflow?

Sebelum kita masuk ke dalam, mari pahami apa arti "overflow" dalam konteks CSS. Bayangkan Anda punya sebuah kotak kecil, dan Anda mencoba memasukkan boneka teddy besar ke dalamnya. Apa yang terjadi? Boneka itu tidak memasukkan, kan? Itu tepatnya apa yang terjadi dengan konten dalam desain web kadang-kadang. CSS overflow adalah cara kita memberitahu browser apa yang harus dilakukan saat konten terlalu besar untuk wadahnya.

CSS overflow - Dengan Nilai visible dan hidden

Marilah kita mulai dengan dasar-dasar. Properti CSS overflow memiliki dua nilai dasar: visible dan hidden.

visible (Default)

Ini adalah perilaku default. Itu seperti mengatakan, "Biarkan semuanya terlihat!"

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

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

Dalam contoh ini, teks akan meluap keluar kotak, terlihat oleh semua. Itu seperti tangannya dan kaki boneka teddy yang muncul dari kotak.

hidden

Nilai ini seperti trick magis - membuat overflow menghilang!

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

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

Di sini, semua konten yang tidak cocok di dalam kotak 100x100 piksel akan dipotong, disembunyikan dari pandangan. Itu seperti kita memasukkan boneka teddy ke dalam kotak dan menutup tutupnya erat!

CSS overflow - Nilai clip

Nilai clip seperti sepupu ketat hidden. Itu tidak hanya menyembunyikan overflow, tetapi juga melarang semua penggulungan, termasuk penggulungan programmatik.

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

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

Dengan clip, itu seperti kita telah menutup kotak dan menutupnya erat. Tidak ada pengecoh, tidak ada pergerakan!

CSS overflow - Dengan Nilai scroll dan auto

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

scroll

Nilai ini selalu menambahkan scrollbar, terlepas dari apakah itu diperlukan atau tidak.

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

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

Itu seperti memberikan kotak Anda一套轮子，只以防万一你需要移动东西。

auto

Ini adalah opsi cerdas. Itu hanya menambahkan scrollbar saat diperlukan.

<div class="overflow-auto">
<p Konten ini hanya akan mendapatkan scrollbar jika meluap.</p>
</div>

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

Pikirkan auto seperti seorang teman yang membantu yang hanya menawarkan untuk membawa belanja Anda saat tangan Anda penuh.

Properti CSS Overflow - Properti Terkait

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

Properti	Deskripsi	Contoh
overflow-x	Mengontrol overflow horizontal	overflow-x: scroll;
overflow-y	Mengontrol overflow vertikal	overflow-y: hidden;
overflow-wrap	Menentukan apakah kata harus dipotong saat konten meluap wadah	overflow-wrap: break-word;
text-overflow	Menentukan bagaimana konten yang meluap yang tidak ditampilkan ditandai bagi pengguna	text-overflow: ellipsis;

Marilah kita lihat ini dalam aksi:

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

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

Dalam contoh ini:

• Overflow horizontal akan menampilkan scrollbar
• Overflow vertikal akan disembunyikan
• Kata yang panjang akan dipotong untuk memasukkan lebar
• Jika teks meluap secara horizontal, itu akan berakhir dengan tanda titik tiga (...)

Itu seperti kita memberikan kotak Anda sebuah pisau瑞士军刀 kontrol konten!

Kesimpulan

Dan itu dia, teman-teman! Kita telah mengeksplorasi dunia yang meluap CSS overflow. Dari menyembunyikan dan menampilkan sampai kontrol konten yang canggih, Anda sekarang memiliki alat untuk mengelola konten Anda seperti seorang ahli.

Ingat, desain web tentang menciptakan pengalaman pengguna yang bagus. Kadang-kadang itu berarti menampilkan semua, 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直觉 untuk menentukan kapan menggunakan metode mana. Dan siapa tahu? Mungkin suatu hari Anda akan mengajarkan generasi berikutnya desainer web tentang keajaiban CSS overflow!

Hingga berjumpa lagi, jaga konten Anda tetap terkontrol dan kreativitas Anda tetap meluap!

Credits: Image by storyset