HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS
warna RGB HEX HSL
Latar Belakang CSS
Warna latar belakang Gambar latar belakang Pengulangan Latar Belakang Lampiran Latar Belakang Singkatan Latar Belakang
Batas CSS
perbatasan Lebar Perbatasan Warna Perbatasan Sisi Perbatasan Singkatan Perbatasan Perbatasan Bulat
Margin CSS
Margin Margin Collapse
Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Teks CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikon CSS Tautan CSS Daftar CSS Tabel CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float
Float Clear Float Examples
CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS
Navbar Vertical Navbar Horizontal Navbar
Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS
Linear Gradients Radial Gradients Conic Gradients
Bayangan CSS
Shadow Effects Box Shadow
Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Tata Letak CSS - Meluap

❮ Sebelumnya Berikutnya ❯

Properti CSS overflowmengontrol apa yang terjadi pada konten yang terlalu besar untuk masuk ke suatu area.

Teks ini sangat panjang dan tinggi wadahnya hanya 100 piksel. Oleh karena itu, bilah gulir ditambahkan untuk membantu pembaca menggulir konten. Rasa sakit itu sendiri adalah cinta Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya Rasa sakit dari rasa sakit di biro di Olimpiade, atau rasa sakit di biro di Olimpiade, dia ingin menjadi gangguan pada konsekuensinya, atau dia menderita rasa sakit dari sistem kekebalan Uni Eropa pada kenyataannya, eros dan konsumen, dan kebencian biasa terhadap zzril. Untuk waktu luang saat kita terbebas dari masa remaja kita ada pilihan Jenis tidak memiliki kejelasan yang melekat

CSS Meluap

Properti overflowmenentukan apakah akan memotong konten atau menambahkan bilah gulir saat konten elemen terlalu besar untuk muat di area yang ditentukan.

Properti overflowmemiliki nilai berikut:

  • visible- Bawaan. Luapan tidak terpotong. Konten dirender di luar kotak elemen
  • hidden- Luapan terpotong, dan konten lainnya tidak akan terlihat
  • scroll- Luapan terpotong, dan bilah gulir ditambahkan untuk melihat konten lainnya
  • auto- Mirip dengan scroll, tetapi menambahkan bilah gulir hanya jika diperlukan

Catatan: Properti overflowhanya berfungsi untuk elemen blok dengan ketinggian tertentu.

Catatan: Di OS X Lion (di Mac), bilah gulir disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun "overflow:scroll" disetel).

melimpah: terlihat

Secara default, overflow adalah visible, artinya tidak terpotong dan ditampilkan di luar kotak elemen:

Anda dapat menggunakan properti overflow saat Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

melimpah: tersembunyi

Dengan hiddennilai tersebut, overflow terpotong, dan konten lainnya disembunyikan:

Contoh

div {
  overflow: hidden;
}

melimpah: gulir

Menyetel nilai ke scroll, overflow terpotong dan scrollbar ditambahkan untuk menggulir di dalam kotak. Perhatikan bahwa ini akan menambahkan bilah gulir baik secara horizontal maupun vertikal (bahkan jika Anda tidak membutuhkannya):

Anda dapat menggunakan properti overflow saat Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow: scroll;
}

melimpah: otomatis

autoNilainya mirip dengan , scrolltetapi hanya menambahkan bilah gulir jika diperlukan:

Anda dapat menggunakan properti overflow saat Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow: auto;
}

overflow-x dan overflow-y

Properti overflow-xand overflow-ymenentukan apakah akan mengubah luapan konten hanya secara horizontal atau vertikal (atau keduanya):

overflow-xmenentukan apa yang harus dilakukan dengan tepi kiri/kanan konten.
overflow-ymenentukan apa yang harus dilakukan dengan tepi atas/bawah konten.

Anda dapat menggunakan properti overflow saat Anda ingin memiliki kontrol tata letak yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi kotak elemen.

Contoh

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Uji Diri Anda Dengan Latihan

Olahraga:

Paksa bilah gulir ke elemen <div> dengan class="intro".

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Semua Properti CSS Overflow

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ Sebelumnya Berikutnya ❯