CSS overflow: Taşma, Kırpma ve Kaydırma Rehberi

Taşma ne zaman oluşur?

MDN'ye göre blok düzeyindeki öğeler varsayılan olarak içeriklerine sığacak kadar büyür. Taşma, kapsayıcının boyutu kısıtlandığında ortaya çıkar. Dikey taşma için alanı height ya da max-height, yatay taşma için width ya da max-width kısıtlar. Yazı yönüne göre çalışan karşılıklar block-size, max-block-size, inline-size ve max-inline-size özellikleridir. Satır yönündeki taşmanın bir nedeni de white-space: nowrap değeridir; bu değer metnin satır kırmasını engellediği için metin kapsayıcının yanından dışarı uzar.

Başlangıç değeri visible olduğu için, hiçbir şey yapmadığınızda taşan içerik kutunun dışında görünmeye devam eder ve sonraki içeriğin altına ya da üstüne binebilir. MDN'nin normal akış ve taşma rehberindeki ilk örnek tam olarak budur: Sabit genişlik ve yükseklikteki bir kutuya fazla içerik konduğunda içerik kutuyu doldurduktan sonra görünür biçimde taşmaya devam eder.

Beş değer ve davranışları

• visible: Varsayılan değerdir. Taşan içerik kırpılmaz, padding kutusunun dışında görünebilir. Öğe kaydırma kapsayıcısı değildir ve yeni bir blok biçimlendirme bağlamı oluşturmaz.
• hidden: Taşan içerik padding kutusunda kırpılır ve kaydırma çubuğu gösterilmez. Ancak içerik taşıyorsa öğe bir kaydırma kapsayıcısıdır: Kullanıcı fare tekerleği ya da dokunarak kaydıramaz, ama gizli kalan odaklanabilir bir öğeye Sekme tuşuyla geçildiğinde o öğe görünüme kaydırılır. scrollLeft, scrollTop ya da scrollTo() ile programla kaydırmak da mümkündür.
• clip: Taşan içerik, overflow-clip-margin ile tanımlanan taşma kırpma kenarında kırpılır. Öğe kaydırma kapsayıcısı değildir; kırpılan içerik görünmez ve programla kaydırma desteklenmez.
• scroll: Taşan içerik padding kutusunda kırpılır. İçerik taşsın ya da taşmasın öğe her zaman kaydırma kapsayıcısıdır ve kaydırma çubukları gösterir. Bu, içerik değiştikçe çubukların görünüp kaybolmasını önler.
• auto: Taşan içerik padding kutusunda kırpılır. Kaydırma çubukları ve kaydırma kapsayıcısı yalnızca içerik taştığında ortaya çıkar. İçerik sığıyorsa görünüm visible ile aynıdır, ama yine de yeni bir biçimlendirme bağlamı oluşturur.

Tablodaki son sütun MDN'nin overflow sayfasındaki kurala dayanır: visible ve clip dışındaki tüm değerler yeni bir blok biçimlendirme bağlamı oluşturur. MDN bunun nedenini de açıklar: Kayan bir öğe kaydırılan bir öğeyle kesişseydi, tarayıcı her kaydırma adımında içeriği yeniden sarmak zorunda kalır ve kaydırma yavaşlardı. Bu kuralın yan etkisi, overflow: hidden ya da auto değerinin kayan öğeleri kapsaması ve margin çökmesini engellemesidir. Bu davranışı yalnızca bu amaçla kullanmak istiyorsanız, istenmeyen kırpma riski olmadan aynı işi yapan display: flow-root değerini display yazısında anlatıyoruz.

hidden ile clip arasındaki fark

İki değer de taşan içeriği görünmez yapar, ama aralarındaki fark erişilebilirlik ve davranış açısından önemlidir. hidden değerinde öğe (içerik taşıyorsa) bir kaydırma kapsayıcısıdır; gizli bölgedeki bir bağlantıya ya da form alanına Sekme tuşuyla gelindiğinde tarayıcı o öğeyi görünüme kaydırır. clip değerinde ise kaydırma kapsayıcısı oluşmaz: MDN'nin örneğinde gizli bölgedeki <input> öğesi odak alır ama görünüme kaydırılmaz, bu yüzden klavye kullanıcıları o içeriğe ulaşamaz.

.kart-hidden {
  height: 10em;
  overflow: hidden;
  /* taşan form alanına Sekme ile gelinince görünüme kaydırılır */
}

.kart-clip {
  height: 10em;
  overflow: clip;
  overflow-clip-margin: 20px;
  /* içerik padding kutusunun 20px dışına kadar çizilir, sonra kırpılır;
     kaydırma kapsayıcısı oluşmaz */
}

overflow-clip-margin, overflow: clip verilmiş bir öğenin sınırlarının ne kadar dışına çizilebileceğini belirler. Değeri negatif olmayan bir <length> olmalıdır ve isteğe bağlı bir <visual-box> anahtar kelimesiyle (varsayılanı padding-box) kırpma kenarının hangi kutudan ölçüleceği seçilebilir. Öğede overflow: clip yoksa bu özellik yok sayılır.

MDN, iki değerin kaydırmaya bağlı animasyonlar açısından da farklı olduğunu belirtir: clip kaydırma kapsayıcısı oluşturmadığı için tarayıcı en yakın kaydırma kapsayıcısı atasını ararken bu öğeleri atlar. Aynı mantık position: sticky için de önemlidir: hidden verilmiş bir ata, yapışkan öğenin yapışacağı kaydırma mekanizmasını oluşturur. Kaydırma zaman çizelgeleri için scroll-driven animations yazısına bakabilirsiniz.

İki değerli yazım ve eşleşme kuralları

overflow: hidden visible gibi iki değerli yazımda ilk değer overflow-x, ikinci değer overflow-y olur. Ancak bazı birleşimler olduğu gibi uygulanmaz. MDN iki kural verir:

• Bir yön visible, diğer yön visible ya da clip dışında bir değerse, visible olan yön auto gibi davranır.
• Bir yön clip, diğer yön visible ya da clip dışında bir değerse, clip olan yön hidden gibi davranır.

.serit {
  overflow: auto visible;
  /* yatay: auto, dikey: visible istenmiş;
     diğer yön auto olduğu için dikey yön de auto gibi davranır */
}

.yalnizca-dikey {
  overflow-y: scroll;
  /* yalnızca dikey kaydırma çubuğu; yatay çubuk eklenmez */
}

Pratik sonuç şudur: Yatayda kaydırılabilen ama dikeyde taşan içeriğin görünür kaldığı bir şerit, yalnızca overflow ile kurulamaz; dikey yön de kaydırma kapsayıcısının parçası olur. MDN'nin akış ve taşma rehberindeki ipucu da buna benzer: Yalnızca dikey kaydırma gerekiyorsa overflow: scroll yerine overflow-y: scroll yazarak gereksiz yatay çubuktan kurtulabilirsiniz.

Tek satırı üç noktayla kısaltmak: text-overflow

text-overflow, gizlenen taşan içeriğin kullanıcıya nasıl gösterileceğini belirler: clip (varsayılan) metni içerik alanının sınırında keser ve bu kesme bir karakterin ortasına denk gelebilir; ellipsis kesilen metni temsil etmek için üç nokta karakteri gösterir; bir <string> değeri ise kendi belirlediğiniz metni gösterir. Üç nokta ya da metin içerik alanının içinde gösterilir ve görünen metni kısaltır.

MDN'nin özellikle vurguladığı nokta, text-overflow özelliğinin taşmayı kendisinin oluşturmadığıdır. Metnin kapsayıcıdan taşması için başka iki özelliğe ihtiyaç vardır: satır kırmayı engelleyen white-space: nowrap ve taşmayı gizleyen overflow: hidden. Ayrıca kutunun genişliği sınırlı olmalıdır.

.baslik-kisa {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* tek satır; sığmayan kısım üç noktayla biter */
}

.baslik-ozel {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " [..]";
  /* üç nokta yerine kendi metniniz */
}

• Yalnızca satır yönünde çalışır: text-overflow, blok kapsayıcıdan satır ilerleme yönünde taşan içeriği etkiler; kutunun altından taşan çok satırlı metni etkilemez.
• Bir ya da iki değer: Tek değer satırın bitiş ucuna uygulanır (soldan sağa metinde sağ, sağdan sola metinde sol uç). İki değerde ilki sol, ikincisi sağ uç içindir.
• Düzenlenebilir öğeler: Metin türündeki <input>, <textarea> ve contenteditable öğelerde tarayıcılar ellipsis değerini genellikle her zaman ya da öğe odaktayken clip gibi uygular; böylece metin düzenlenebilir kalır. Davranış tarayıcıya göre değişir.

Çok satırlı metni kutunun altında üç noktayla bitirmek için Overflow Module Level 4 belirtiminde block-ellipsis adlı bir özellik tanımlanmıştır. MDN'nin akış ve taşma rehberi, yazıldığı tarihte bu özellik için tarayıcı desteği olmadığını belirtir; güncel durum için uyumluluk tablosuna bakın.

scrollbar-gutter: kaydırma çubuğu için yer ayırmak

İçerik büyüyüp kaydırma çubuğu ortaya çıktığında, çubuk içerik alanından yer çaldığı için düzen yana kayabilir. scrollbar-gutter, kaydırma çubuğu için önceden yer ayırarak bu kaymayı önler. Kaydırma çubuğu oluğu (gutter), iç kenarlık kenarı ile dış padding kenarı arasındaki ve tarayıcının çubuğu çizebileceği alandır. Çubuk yoksa oluk padding'in bir uzantısı olarak boyanır.

Tarayıcı iki tür kaydırma çubuğundan birini kullanır: Klasik çubuklar her zaman bir oluğa yerleşir ve göründüklerinde yer kaplar. Bindirme (overlay) çubuklar ise içeriğin üstüne çizilir, oluk kullanmaz ve genellikle kısmen saydamdır.

• auto: Başlangıç değeri. Klasik çubuklar overflow değeri scroll olduğunda ya da auto olup kutu taştığında oluk oluşturur. Bindirme çubuklar yer kaplamaz.
• stable: Klasik çubuklarda, overflow değeri auto, scroll ya da hidden ise kutu taşmasa bile oluk bulunur. Bindirme çubuklarda oluk olmaz.
• both-edges: stable ile birlikte kullanılır. Satır başlangıç ya da bitiş kenarlarından birinde oluk varsa karşı kenarda da oluşturulur; içerik simetrik kalır.

.liste {
  max-height: 20rem;
  overflow: auto;
  scrollbar-gutter: stable;
  /* içerik kısa da olsa uzun da olsa genişlik değişmez */
}

.ortali-panel {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  /* iki yanda da eşit oluk: ortalanmış içerik kaymaz */
}

Kaydırılabilir taşma ile "mürekkep" taşması

Her taşma kaydırma alanını büyütmez. MDN'nin taşma modülü sayfası, CSS kutu modeline katılmayan boyama efektlerinin düzeni etkilemediğini ve bunlara "ink overflow" (mürekkep taşması) dendiğini açıklar. Kutu gölgeleri, kenarlık görselleri, metin süslemeleri, taşan glifler ve outline bu türdendir. Bunlar kaydırılabilir taşma bölgesini genişletmez; yani bir öğenin gölgesi kapsayıcısının dışına çıksa bile, sırf bu yüzden kaydırma çubuğu oluşmaz. Ancak kapsayıcıya overflow: hidden verdiğinizde bu gölgeler de padding kutusunda kırpılır; MDN'nin BFC rehberinin "kırpılmış gölgeler" uyarısı buradan gelir. Gölgelerin kendisi border-radius ve box-shadow yazısında anlatılıyor.

Erişilebilirlik: klavyeyle kaydırma

MDN, bazı tarayıcılarda kaydırılan içerik alanlarının klavyeyle odaklanamadığını ve bu yüzden yalnızca klavye kullanan kişilerin bu alanları kaydıramayabileceğini belirtir. Önerilen çözüm HTML tarafındadır: Kapsayıcıya tabindex="0" özniteliği vererek odak alabilmesini sağlamak, uygun bir WAI-ARIA rolü (örneğin role="region") eklemek ve aria-label ya da aria-labelledby ile erişilebilir bir ad vermek.

<div class="liste" tabindex="0" role="region" aria-label="Sipariş geçmişi">
  <!-- uzun içerik -->
</div>

Uygulamalı mini örnek: kaydırılabilir bildirim paneli

Bir bildirim paneli düşünelim: Başlıklar tek satırda üç noktayla kısalsın, liste en fazla 18rem yüksekliğinde olsun ve taşarsa kaydırılsın, kaydırma çubuğu ortaya çıktığında içerik yana kaymasın.

.panel {
  width: 320px;
  max-height: 18rem;
  overflow-y: auto;
  /* yalnızca dikey: içerik taşarsa kaydırma çubuğu çıkar */
  scrollbar-gutter: stable;
  /* klasik çubuklarda oluk baştan ayrılır, genişlik sabit kalır */
}

.panel .bildirim-baslik {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* uzun başlık tek satırda üç noktayla biter */
}

Bu kurallarla panel kısa içerikle açıldığında da klasik kaydırma çubuğu kullanan sistemlerde oluk için yer ayrılmış olur, bildirimler arttığında genişlik değişmez. Başlıklar blok düzeyindeki öğeler olduğunda (örneğin bir <p> ya da <h3>) panelin içerik genişliği kadar yer kaplar ve sığmayan kısım üç noktayla kısalır. overflow-y: auto yerine overflow: auto yazsaydınız, uzun bir kelime ya da görsel yatay taşmaya yol açtığında yatay çubuk da çıkabilirdi.

Sık yapılan hatalar

• Yalnızca text-overflow: ellipsis yazmak: white-space: nowrap ve overflow: hidden olmadan üç nokta görünmez.
• Kapsayıcının boyutunu kısıtlamamak: height ya da max-height yoksa blok öğe içeriğine göre büyür ve taşma hiç oluşmaz.
• hidden ile içeriğin tamamen erişilemez olduğunu sanmak: İçerik Sekme tuşuyla ya da programla görünüme kaydırılabilir. Kaydırmayı tamamen kapatmak için clip gerekir, ama bu klavye erişimini de engeller.
• Gerekmediği halde overflow: scroll: Çubuklar her zaman ve iki yönde görünür. Çoğu durumda auto ya da yalnızca tek eksende overflow-y yeterlidir.
• Float temizlemek için overflow: hidden: Gölgeleri ve taşan öğeleri kırpar, yapışkan alt öğeleri etkiler; display: flow-root daha güvenlidir.
• Yeni kodda overlay kullanmak: MDN'ye göre standart dışı bir değer olarak başlayan overlay, artık belirtimde auto için eski bir takma addır ve yeni kodda kullanılması önerilmez.

Sık Sorulan Sorular

overflow: hidden ile overflow: clip arasındaki fark nedir?

İkisi de taşan içeriği gizler. hidden içerik taştığında bir kaydırma kapsayıcısı oluşturur ve programla ya da odakla kaydırmaya izin verir; ayrıca yeni bir blok biçimlendirme bağlamı açar. clip kaydırma kapsayıcısı ve yeni BFC oluşturmaz, programla kaydırmayı desteklemez ve overflow-clip-margin ile kırpma kenarını genişletmenize izin verir.

Üç nokta neden çok satırlı metinde çalışmıyor?

text-overflow yalnızca satır yönünde taşan içeriği etkiler. Kutunun altından taşan metin için tasarlanan block-ellipsis özelliği için MDN rehberi yazıldığı tarihte tarayıcı desteği olmadığını belirtir.

Kaydırma çubuğu çıkınca sayfa neden yana kayıyor?

Klasik kaydırma çubukları göründüklerinde yer kaplar ve içerik alanını daraltır. Kapsayıcıya scrollbar-gutter: stable vererek oluğu baştan ayırabilirsiniz. Bindirme çubuk kullanan sistemlerde bu sorun yaşanmaz.

overflow-x: hidden verdim ama dikey kaydırma çubuğu çıktı, neden?

Yalnızca bir yönü visible dışında bir değere ayarladığınızda, diğer yön visible kalsa bile auto gibi davranır. İçerik dikeyde de taşıyorsa dikey çubuk ortaya çıkar.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · white-space ve overflow-wrap · position: sticky · display ve flow-root · box-sizing · Scroll-driven animations · Core Web Vitals ve CLS