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

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

Değerler

Değer	Açıklama
`hidden`	Bloğun sınırlarını aşan içeriği gizler.
`scroll`	Her zaman kaydırma çubukları ekler, hiçbir şey taşmasa bile (bu durumda etkin olmayacaklardır).
`auto`	Gerektiğinde kaydırma çubukları ekler: eğer içerik sığmıyorsa görünürler, eğer her şey sığıyorsa görünmezler.
`visible`	Bloğun sınırlarını aşan içeriği gizlemez.

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:

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

#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):

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

#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:

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

#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):

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

#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:

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

#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:

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

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

Ayrıca Bakınız

word-break özelliği,
uzun bir kelimenin harflerini yeni bir satıra taşır
overflow-wrap özelliği,
uzun bir kelimenin harflerini yeni bir satıra taşır
overflow-x özelliği,
yatay olarak taşan kısımları kırpar
overflow-y özelliği,
dikey olarak taşan kısımları kırpar