overflow Özelliği

overflow özelliği, tarayıcıya bir bloğun sınırlarını (genişliğini veya yüksekliğini) aşan içerikle (metin, resimler, diğer bloklar) nasıl başa çıkacağını belirtir. Tarayıcı taşan kısmı gizleyebilir, kaydırma çubukları ekleyebilir veya hiçbir şey yapmayabilir (olduğu gibi bırakabilir - sınırların dışına taşmış halde).

Sözdizimi

cssseçici {
  overflow: hidden | scroll | auto | visible;
}

Değerler

Varsayılan değer: visible.

Örnek . visible Değeri

Bu örnekte, çok uzun bir kelime kapsayıcıya sığmayacak ve sınırlarının dışına taşacaktır. Kırpma olmaz:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Örnek . visible Değeri

Şimdi ise sadece genişlik değil, yükseklik de sınırlı (metin bloğun hem genişlik hem de yükseklik sınırını aşacak):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Örnek . hidden Değeri

Şimdi, kapsayıcının sınırlarını aşan her şey kırpılacaktır (yükseklik için de). Yükseklik kırpılmasının sadece açıkça belirtildiği durumlarda gerçekleştiğine dikkat edin. Aksi takdirde metin kapsayıcıyı yüksekliğe göre genişletir - ve herhangi bir kırpma olmaz:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Örnek . scroll Değeri

scroll değerinde kaydırma çubukları her zaman olacaktır, hiçbir şey taşmasa bile (bu durumda etkin olmayacaklardır). Şu anda metin ne genişlik ne de yükseklik olarak taşmıyor, ancak yine de kaydırma çubukları var (etkin değil):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Örnek . auto Değeri

auto değerinde kaydırma çubukları sadece içerik kapsayıcının sınırlarını aştığında eklenir. Şu anda her şey sığdığı için yoklar:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Örnek . auto Değeri

Şimdi genişliği sınırlayalım - yatay kaydırma çubuğu görünecek:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Ayrıca Bakınız