Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 18 : Property Overflow pada CSS

By Web Design Purbalingga Post a Comment
Property Overflow pada CSS – Masih banyak sekali property css yang belum di bahas di blog ini, salah satunya adalah property overflow. Pada materi kali ini mencoba membahas tentang property css yang satu ini beserta contoh penggunaannya. Lihat daftar tag html di SINI

Property Overflow pada CSS

Fungsi property ini sendiri adalah bagaimana css bisa mengontrol atau mengendalikan sebuah konten yang diperkirakan konten tersebut tidak bisa di tampung dalam wadah konten itu sendiri. Logika sederhananya seperti ini, jika kamu punya botol air minum dengan kapasitas isi hanya 1 liter air, bagaimana cara kamu menampung air yang akan kamu terima berikutnya.
Tentunya kamu punya banyak pilihan bukan? Sesuai dengan kebutuhan kamu seperti apa nanti. Begitu pula dengan property ini, property overflow memiliki 4 nilai yang dapat kita pilih sesuai kebutuhan kita. Berikut ini adalah nilai dari property overflow

Visible

Efek dari nilai visible ini adalah konten akan keluar dari wadah (kotak) yang sudah disediakan. Tuliskan baris kode berikut ini pada text editor kalian
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style>
  p {
   border: 1px solid teal;
   width: 300px;
   height: 120px;
   text-align: justify;
   overflow: visible;
  }
 </style>
</head>
<body>
 <p>Di Blog Web Design Purbalingga kita bisa belajar tentang bagaimana aturan dasar saat mendesain sebuah web. Tidak cuma itu, kita juga bisa belajar sedikit demi sedikit tentang web programming. Blog ini sangat asik untuk belajar karena selain ada penjelasan tentang materi itu sendiri, juga ada contoh penggunaan kode kodenya.</p>
</body>
</html>
Hasilnya

Hidden

Efek dari nilai hidden ini adalah konten akan disembunyikan jika konten tersebut melebihi batas wadah yang disediakan. Jangan lupa ganti nilai visible menjadi hidden
p {
  overflow: hidden;
}
Hasilnya

Scroll

Efek dari nilai scroll ini adalah konten akan disembunyikan jika konten tersebut melebihi batas wadah yang disediakan, tapi kita masih bisa melihat konten yang di sembunyikan tadi dengan adanya efek scroll vertical dan horizontal pada wadah yang disediakan. Jangan lupa ganti nilai hidden menjadi scroll
p {
  overflow: scroll;
}
Hasilnya

Auto

Sedangkan efek dari nilai auto ini adalah sama seperti nilai scroll, tapi tanpa scroll horizontal. Jangan lupa ganti nilai scroll menjadi auto
p {
  overflow: auto;
}
Hasilnya
Demikian materi kali ini tentang penggunaan property overflow pada css. Semoga bermanfaat dan jangan lupa untuk selalu dukung kami dengan cara share artikel ini sebanyak – banyaknya. Seperti biasa jika ada yang belum jelas, silahkan tanyakan di kolom komentar di bawah ini dan sampai jumpa di materi berikutnya.

Post a Comment for "Materi 18 : Property Overflow pada CSS"