Tata Letak CSS - Tumpas

CSS overflow properti mengawal cara pengendalian kandungan yang terlalu besar untuk disesuaikan di kawasan yang ditentukan.

Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan. Teks ini sangat panjang, ketinggian wadahnya hanya 100 piksel. Oleh itu, palang gerak ditambahkan untuk membantu pembaca menggerakkan kandungan.

Coba Sendiri

CSS Overflow

overflow Properti ini menentukan sama ada kandungan dipotong atau palang gerak ditambahkan apabila kandungan terlalu besar untuk disesuaikan di kawasan yang ditentukan.

overflow Properti ini boleh diatur dengan nilai berikut:

  • visible - Secara lalai. Kandungan tidak dipotong. Kandungan akan diwarnai di luar kotak elemen
  • hidden - Kandungan dipotong, sisanya akan tak dapat dilihat
  • scroll - Kandungan dipotong, palang gerak ditambahkan untuk melihat sisanya
  • auto - Dengan scroll Sebagai yang serupa, tetapi hanya menambahkan palang gerak apabila diperlukan

Komen:overflow Properti ini hanya berlaku untuk elemen blok yang mempunyai ketinggian yang ditentukan.

Komen:Dalam OS X Lion (pada Mac), palang gerak secara lalai disembunyikan dan hanya muncul apabila digunakan (walaupun diatur "overflow:scroll").

overflow: visible

Secara lalai, overflow adalah terlihat (visible) ini berarti ia tidak akan dipotong, tetapi akan diwarnai di luar kotak elemen:

Jika anda ingin mengawal tata letak dengan lebih baik, anda boleh gunakan properti overflow. Properti overflow menentukan apa yang akan terjadi jika kandungan melampaui kotak elemen.

Contoh

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

Coba Sendiri

overflow: hidden

Jika anda gunakan hidden nilai, kandungan akan dipotong dan sisanya disembunyikan:

Jika anda ingin mengawal tata letak dengan lebih baik, anda boleh gunakan properti overflow. Properti overflow menentukan apa yang akan terjadi jika kandungan melampaui kotak elemen.

Contoh

div {
  overflow: hidden;
}

Coba Sendiri

overflow: scroll

Jika nilai diatur untuk scrollKandungan akan dipotong dan palang gerak ditambahkan untuk menggerakkan di dalam kotak (walaupun anda tidak memerlukannya):

Jika anda ingin mengawal tata letak dengan lebih baik, anda boleh gunakan properti overflow. Properti overflow menentukan apa yang akan terjadi jika kandungan melampaui kotak elemen.

Contoh

div {
  overflow: scroll;
}

Coba Sendiri

overflow: auto

auto nilai seperti scrolltetapi ia hanya menambahkan palang gerak apabila diperlukan:

Jika anda ingin mengawal tata letak dengan lebih baik, anda boleh gunakan properti overflow. Properti overflow menentukan apa yang akan terjadi jika kandungan melampaui kotak elemen.

Contoh

div {
  overflow: auto;
}

Coba Sendiri

overflow-x dan overflow-y

overflow-x Dan overflow-y Properti ini menentukan sama ada kandungan hanya diubah secara horizontal atau vertikal (atau keduanya):

  • overflow-x Menentukan bagaimana kandungan di sebelah kiri/kanan menghadapi.
  • overflow-y Menentukan bagaimana kandungan di atas/bawah menghadapi.
Jika anda ingin mengawal tata letak dengan lebih baik, anda boleh gunakan properti overflow. Properti overflow menentukan apa yang akan terjadi jika kandungan melampaui kotak elemen.

Contoh

div {
  overflow-x: hidden; /* Sembunyikan bar gulung horizontal */
  overflow-y: scroll; /* Menambahkan bar gulung vertikal */
}

Coba Sendiri

Semua Properti Overflow CSS

Properti Deskripsi
overflow Tentukan apa yang akan terjadi jika kandungan melampaui kandungan elemen.
overflow-x Tentukan bagaimana kandungan akan ditangani jika kandungan melampaui kawasan konten elemen.
overflow-y Tentukan bagaimana kandungan akan ditangani jika kandungan melampaui kawasan konten elemen.