Layout CSS - Kenaikan

Properti CSS overflow mengendalikan cara pengaturan konten yang terlalu besar untuk masuk ke area yang ditentukan.

Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten. Tekst ini sangat panjang, dan ketinggian kontainer hanya 100 pixel. Oleh karena itu, scrollbar ditambahkan untuk membantu para baca membaca konten.

}

CSS Overflow

Deskripsi Properti ini menentukan apakah konten akan dipotong atau scrollbar ditambahkan ketika konten terlalu besar untuk masuk ke area yang ditentukan.

Deskripsi Properti ini dapat diatur ke nilai berikut:

  • visible - Secara standar. Keluaran tidak dipotong. Konten di rendering di luar kotak elemen
  • hidden - Keluaran dipotong, sisanya konten tidak terlihat
  • scroll - Keluaran dipotong, dan scrollbar ditambahkan untuk melihat sisanya konten
  • auto - Dengan scroll Dikarenakan, tetapi hanya menambahkan scrollbar saat diperlukan

Keterangan:Deskripsi Properti ini hanya berlaku untuk elemen blok yang memiliki tinggi yang ditentukan.

Keterangan:di OS X Lion (pada Mac), scrollbar secara standar tersembunyi dan hanya muncul saat digunakan (meskipun diatur "overflow:scroll").

overflow: visible

secara standar, keluaran adalah terlihat (visible) ini berarti ia tidak akan dipotong, tetapi di rendering di luar kotak elemen:

Ketika Anda ingin mengatur tata letak yang lebih baik, Anda dapat menggunakan properti overflow. Properti overflow menentukan apa yang terjadi jika konten keluar kotak elemen.

Contoh
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
overflow-y: scroll; /* Menambahkan bilah guling vertikal */

}

overflow: hidden

jika Anda menggunakan hidden nilai, keluaran akan dipotong, dan sisanya konten akan disembunyikan:

Ketika Anda ingin mengatur tata letak yang lebih baik, Anda dapat menggunakan properti overflow. Properti overflow menentukan apa yang terjadi jika konten keluar kotak elemen.

Contoh
  overflow: hidden;
overflow-y: scroll; /* Menambahkan bilah guling vertikal */

}

overflow: scroll

jika nilai diatur ke scrollkeluaran akan dipotong, dan scrollbar ditambahkan untuk menggerakkan di dalam kotak (meskipun Anda tidak memerlukannya):

Ketika Anda ingin mengatur tata letak yang lebih baik, Anda dapat menggunakan properti overflow. Properti overflow menentukan apa yang terjadi jika konten keluar kotak elemen.

Contoh
  overflow: scroll;
overflow-y: scroll; /* Menambahkan bilah guling vertikal */

}

overflow: auto

auto nilai seperti scrolltetapi hal ini hanya menambahkan scrollbar saat diperlukan:

Ketika Anda ingin mengatur tata letak yang lebih baik, Anda dapat menggunakan properti overflow. Properti overflow menentukan apa yang terjadi jika konten keluar kotak elemen.

Contoh
  overflow: auto;
overflow-y: scroll; /* Menambahkan bilah guling vertikal */

}

overflow-x dan overflow-y

overflow-x dan overflow-y Properti ini menentukan apakah konten keluar hanya mengubah horisontal atau vertikal (atau keduanya):

  • overflow-x Tentukan bagaimana konten di kiri/kanan margin ditangani.
  • overflow-y Tentukan bagaimana konten di atas/bawah margin ditangani.
Ketika Anda ingin mengatur tata letak yang lebih baik, Anda dapat menggunakan properti overflow. Properti overflow menentukan apa yang terjadi jika konten keluar kotak elemen.

Contoh
  div {
  overflow-x: hidden; /* Sembunyikan bilah guling horizontal */
overflow-y: scroll; /* Menambahkan bilah guling vertikal */

}

Coba Sendiri

Semua Properti Overflow CSS Properti
Deskripsi Tentukan apa yang terjadi jika konten melampaui kotak elemen.
overflow-x Tentukan bagaimana bagian kiri/kanan konten ditangani saat konten melampaui area konten elemen.
overflow-y Tentukan bagaimana bagian atas/bawah konten ditangani saat konten melampaui area konten elemen.