Luapan

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 41 dari 76.

Dalam CSS, property overflow mengatur apa yang terjadi pada konten yang melampaui kotak elemennya. Ketika konten suatu elemen terlalu besar untuk muat dalam lebar dan tinggi yang ditentukan, property overflow menentukan apakah konten akan dipotong, scrollbar akan ditambahkan, atau konten yang melampaui batas akan ditampilkan di luar batas elemen.

Berikut sintaks dasar untuk menggunakan property overflow:

selector {
    overflow: value;
}

value: Perilaku overflow yang diinginkan, yang dapat berupa salah satu dari berikut:

visible: Ini adalah nilai default. Konten yang meluap ditampilkan di luar kotak elemen dan dapat menimpa elemen di sekitarnya.

hidden: Konten yang meluap akan dipotong, dan sisanya tidak terlihat.

scroll: Menambahkan scrollbar (horizontal dan vertikal) ke elemen, sehingga pengguna dapat menggulir konten yang meluap.

auto: Browser menentukan apakah perlu menambahkan bilah gulir berdasarkan konten dan ruang yang tersedia. Biasanya, bilah gulir hanya ditambahkan jika diperlukan.

Contoh:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Dalam contoh ini, semua elemen <div> dengan lebar 200px dan tinggi 100px akan diberi scrollbar agar konten yang meluap dapat dilihat.

Kamu juga bisa mengatur perilaku luapan secara terpisah untuk arah horizontal dan vertikal menggunakan property overflow-x dan overflow-y:

.example {
    overflow-x: hidden; /* Sembunyikan luapan horizontal */
    overflow-y: scroll; /* Tambahkan bilah gulir vertikal */
}

Tantangan

Mudah

Kamu diberi dokumen HTML dengan elemen division (<div>) yang berisi paragraf (<p>) dengan teks panjang. Tugasmu adalah menggunakan property overflow untuk mengatur tampilan konten yang meluap. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div>. Atur width menjadi 300px, height menjadi 150px, dan border menjadi 1px solid black.
Atur property overflow pada <div> menjadi scroll untuk menambahkan scrollbar pada elemen tersebut.

Coba sendiri

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>