CSS Düzen - Akış

CSS overflow özelliği, içerik fazla büyük ve belirli bir bölgeye sığmayacak kadar büyükse içerikle nasıl işlem yapılacağını kontrol eder.

Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi. Bu metin çok uzun ve konteynerin yüksekliği sadece 100 pikseldir. Bu yüzden, okuyucuların içeriği kaydırmalarına yardımcı olmak için kaydırma çubuğu eklendi.

Kişisel Deneyim

CSS Overflow

overflow Özellik, elementin içeriği belirli bir bölgeye sığmayacak kadar büyükse içerikten kesme yapma veya kaydırma çubuğu ekme konusunda belirler.

overflow Özellik aşağıdaki değerleri ayarlayabilir:

  • görünür - Varsayılan. Aşırıya çıkan içerik kesilmez. İçerik element çerçevesi dışında render edilir
  • gizli - Aşırıya çıkan içerik kesilir ve geri kalan içerik görünmez hale gelir
  • scroll - Aşırıya çıkan içerik kesilir ve geri kalan içerik görüntülenir
  • auto - scroll Benzer, ancak yalnızca gerekli olduğunda kaydırma çubuğu ekler

Açıklama:overflow Özellik, belirli bir yüksekliğe sahip blok elementlerine yalnızca uygulanır.

Açıklama:OS X Lion'da (Mac üzerinde) kaydırma çubuğu varsayılan olarak gizlidir ve yalnızca kullanıldığında görüntülenir ("overflow:scroll" olarak ayarlanmış olsa bile).

overflow: visible

Varsayılan olarak, aşırıya çıkan içerik görünürdür:görünür) bu, kesilmeyeceğini ve element çerçevesi dışında render edileceğini anlamına gelir:

Dizaynı daha iyi kontrol etmek istediğinizde, overflow özelliğini kullanabilirsiniz. Overflow özelliği, içerik element çerçevesinin dışına çıkarsa ne olacağını belirtir.

Örnek

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

Kişisel Deneyim

kullanıldığında

overflow: hidden gizli değerini ayarladığınızda, aşırıya çıkan içerik kesilir ve geri kalan içerik gizlenir:

Dizaynı daha iyi kontrol etmek istediğinizde, overflow özelliğini kullanabilirsiniz. Overflow özelliği, içerik element çerçevesinin dışına çıkarsa ne olacağını belirtir.

Örnek

div {
  overflow: hidden;
}

Kişisel Deneyim

overflow: scroll

Değer olarak scrollAşırıya çıkan içerik kesilir ve kaydırma çubuğu eklenir, böylece çerçevede kaydırılır. Lütfen, bu hem dikey hem de yatay yönde bir kaydırma çubuğu ekler (sizin gerekli olmadığınız olmasına rağmen):

Dizaynı daha iyi kontrol etmek istediğinizde, overflow özelliğini kullanabilirsiniz. Overflow özelliği, içerik element çerçevesinin dışına çıkarsa ne olacağını belirtir.

Örnek

div {
  overflow: scroll;
}

Kişisel Deneyim

overflow: auto

auto değerleri benzerdir scrollancak, yalnızca gerekli olduğunda kaydırma çubuğu ekler:

Dizaynı daha iyi kontrol etmek istediğinizde, overflow özelliğini kullanabilirsiniz. Overflow özelliği, içerik element çerçevesinin dışına çıkarsa ne olacağını belirtir.

Örnek

div {
  overflow: auto;
}

Kişisel Deneyim

overflow-x ve overflow-y

overflow-x ve overflow-y Özellik, içerikten fazlalığın yalnızca dikey veya yatay olarak (veya her ikisi birlikte) nasıl değiştirileceğini belirler:

  • overflow-x İçeriğin sol/sağ kenarlarının nasıl işleneceğini belirtir.
  • overflow-y İçeriğin üst/yüksek kenarlarının nasıl işleneceğini belirtir.
Dizaynı daha iyi kontrol etmek istediğinizde, overflow özelliğini kullanabilirsiniz. Overflow özelliği, içerik element çerçevesinin dışına çıkarsa ne olacağını belirtir.

Örnek

div {
  overflow-x: hidden; /* Yatay kaydırma çubuğunu gizleyin */
  overflow-y: scroll; /* Dikey kaydırma çubuğu ekleyin */
}

Kişisel Deneyim

Tüm CSS Overflow Özellikleri

Özellik Açıklama
overflow İçerik sınırlarının dışına taşınan içerikle ne olacağını belirler.
overflow-x İçerik alanında içerik sınırlarının nasıl ele alınacağını belirler.
overflow-y İçerik alanında içerik sınırlarının nasıl ele alınacağını belirler.