--- title: 'Taşma Yönetimi' source: 'https://academia.sh/tr/kurslar/css-temelleri/tasma-yonetimi' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:15+00:00' license: 'CC BY-SA 4.0' --- # Taşma Yönetimi İçeriğin kutuya sığmadığı durumun ele alınması; overflow değerlerinin karşılaştırılması, metin taşmasının ayrı mekanizmaları ve kırpmanın erişilebilirlik bedeli. Bu konu boyunca kutular ölçüldü, dizildi ve üst üste bindirildi. Bir durum ele alınmadı: içerik kutusuna **sığmadığında** ne olur? Durum kaçınılmazdır. Uzun bir istasyon adı dar bir hücreye, dokuz sütunlu bir ölçüm çizelgesi dar bir ekrana, sabit yükseklik verilmiş bir karta uzun bir açıklama sığmaz. Bu ders taşmanın ne olduğunu, seçeneklerin her birinin neyi kaybettirdiğini ve metin taşmasının neden ayrı bir mesele olduğunu ele alır. ## Taşmanın Varsayılan Davranışı Görünürlüktür Bir kutunun içeriği kutuya sığmadığında, varsayılan davranış içeriğin **dışarı taşıp görünmesidir**. Kırpılmaz, gizlenmez, kutuyu büyütmez. Bu seçim bilinçlidir: kaybolan bir içerik, düzeni bozan bir içerikten daha kötüdür. Taşan metin görünür kalır ve okunabilir; sorun görülür ve düzeltilebilir. ```js // tasma.mjs — icerigin kutuya sigip sigmadigini ve overflow degerinin sonucunu hesaplar function tasmaDurumu({ kutuEn, kutuBoy, icerikEn, icerikBoy, overflow }) { const yatay = Math.max(0, icerikEn - kutuEn); const dikey = Math.max(0, icerikBoy - kutuBoy); const sonuc = { "visible": { gorunur: true, kaydirilabilir: false, kirpilir: false }, "hidden": { gorunur: false, kaydirilabilir: false, kirpilir: true }, "clip": { gorunur: false, kaydirilabilir: false, kirpilir: true }, "scroll": { gorunur: false, kaydirilabilir: true, kirpilir: true }, "auto": { gorunur: false, kaydirilabilir: yatay > 0 || dikey > 0, kirpilir: true }, }[overflow]; return { yatay, dikey, ...sonuc }; } const kutu = { kutuEn: 320, kutuBoy: 120 }; const icerik = { icerikEn: 480, icerikBoy: 200 }; console.log(`kutu ${kutu.kutuEn}x${kutu.kutuBoy}, icerik ${icerik.icerikEn}x${icerik.icerikBoy}`); for (const o of ["visible", "hidden", "clip", "scroll", "auto"]) { const r = tasmaDurumu({ ...kutu, ...icerik, overflow: o }); console.log(`${o.padEnd(8)} tasma=${r.yatay}x${r.dikey} disaridan gorunur=${String(r.gorunur).padEnd(5)} kaydirilabilir=${String(r.kaydirilabilir).padEnd(5)} kirpilir=${r.kirpilir}`); } console.log("\n--- sigan icerik ---"); for (const o of ["scroll", "auto"]) { const r = tasmaDurumu({ ...kutu, icerikEn: 300, icerikBoy: 100, overflow: o }); console.log(`${o.padEnd(8)} tasma=${r.yatay}x${r.dikey} kaydirilabilir=${r.kaydirilabilir}`); } console.log("\n--- uzun bir sozcugun satira sigmasi ---"); const sozcuk = "Kuzey-Yamac-Otomatik-Olcum-Istasyonu"; const KARAKTER_EN = 8; // ornek bir yazi tipinde karakter genisligi const kutuEn = 160; const sigar = Math.floor(kutuEn / KARAKTER_EN); console.log(`sozcuk ${sozcuk.length} karakter x ${KARAKTER_EN}px = ${sozcuk.length * KARAKTER_EN}px`); console.log(`kutu ${kutuEn}px -> satira ${sigar} karakter sigar, tasma ${sozcuk.length * KARAKTER_EN - kutuEn}px`); const parcalar = sozcuk.match(new RegExp(`.{1,${sigar}}`, "g")); console.log("overflow-wrap: anywhere ile bolunme:"); for (const p of parcalar) console.log(` |${p.padEnd(sigar)}|`); ``` ``` kutu 320x120, icerik 480x200 visible tasma=160x80 disaridan gorunur=true kaydirilabilir=false kirpilir=false hidden tasma=160x80 disaridan gorunur=false kaydirilabilir=false kirpilir=true clip tasma=160x80 disaridan gorunur=false kaydirilabilir=false kirpilir=true scroll tasma=160x80 disaridan gorunur=false kaydirilabilir=true kirpilir=true auto tasma=160x80 disaridan gorunur=false kaydirilabilir=true kirpilir=true --- sigan icerik --- scroll tasma=0x0 kaydirilabilir=true auto tasma=0x0 kaydirilabilir=false --- uzun bir sozcugun satira sigmasi --- sozcuk 36 karakter x 8px = 288px kutu 160px -> satira 20 karakter sigar, tasma 128px overflow-wrap: anywhere ile bolunme: |Kuzey-Yamac-Otomatik| |-Olcum-Istasyonu | ``` ## Beş Değerin Karşılaştırması `visible` — başlangıç değeridir. İçerik taşar ve görünür kalır. Kutunun kendisi büyümez; komşuları taşmadan haberdar değildir ve üstüne çizilebilir. `hidden` — taşan kısım kırpılır ve **erişilemez** olur. Kaydırma çubuğu gösterilmez ama kutu programatik olarak kaydırılabilir bir kutudur; odaklanan bir öge görünür alana getirilebilir. `clip` — `hidden` gibi kırpar ama kutuyu kaydırılabilir yapmaz. Kırpma kesindir. `scroll` — taşan kısım kırpılır ve kaydırma çubuğu **her zaman** gösterilir. `auto` — kırpar ve kaydırma çubuğunu **yalnızca gerektiğinde** gösterir. Çıktının ikinci bloğu bu son iki değerin farkını veriyor: içerik kutuya sığdığında `scroll` hâlâ kaydırılabilir bir kutu üretiyor, `auto` üretmiyor. Bazı ortamlarda kaydırma çubuğu yer kaplar; `scroll` yazmak bu durumda içerik sığsa bile bir şerit ayırır ve kutu daralır. Kaydırma gereğinde ortaya çıksın isteniyorsa `auto` yazılır. ## Kırpmanın Bedeli `overflow: hidden` yazmak sık başvurulan bir çözümdür ve iki farklı amaçla kullanılır. İkisini ayırmak gerekir. Birinci kullanım **kasıtlı kırpmadır**: bir görselin kutuya oturması, bir dekoratif şeklin taşmaması. Burada kırpılan şey bilgi taşımaz. İkinci kullanım **taşma sorununu görünmez kılmaktır**: içerik sığmıyor ve gizlenerek sorun ortadan kaldırılmış gibi yapılıyor. Bu, sorunu çözmez; kullanıcıdan saklar. Kırpılan metin ekran okuyucuya okunmaya devam edebilir ama görsel olarak ulaşılamaz; klavyeyle gezen bir kullanıcı odaklanabilir ama göremez. Ayrım şu soruyla yapılır: **kırpılan şeyin kaybolması kabul edilebilir mi?** Yanıt hayırsa `hidden` değil, `auto` yazılır ya da kutunun ölçüsü esnetilir. Bir yan etki daha vardır ve önceki derslerde iki kez karşımıza çıktı: `overflow` değerinin `visible` dışında olması kutuyu **bağımsız akış kökü** yapar. Kaydırılmış çocuklar yüksekliğe katılır, dış boşluk çökmesi kutunun sınırında durur. Bu, `overflow: hidden` yazmanın bazen ilgisiz görünen bir yerleşim değişikliği yaratmasının sebebidir. ## İki Eksen Ayrı Ayrı `overflow` bir kısayoldur; `overflow-x` ve `overflow-y` açılımlarını ayarlar. Mantıksal karşılıkları `overflow-inline` ve `overflow-block`'tur. İki eksene farklı değer verilebilir ama bir kısıt vardır: bir eksen `visible` iken diğeri kırpan bir değer alırsa, `visible` olan eksen `auto` gibi işlenir. İki eksen bağımsız değildir; bir yönde kırpan bir kutu, diğer yönde taşan içeriği görünür bırakamaz. Yatay kaydırma özel olarak ele alınmalıdır. Geniş bir ölçüm çizelgesini dar bir ekranda göstermenin yolu, çizelgeyi yatay kaydırılabilir bir kutuya almaktır. Böyle bir kutu klavyeyle de erişilebilir olmalıdır; kaydırılabilir bir bölgeye `tabindex="0"` verilmesi ve erişilebilir bir adla adlandırılması bunun karşılığıdır. ## Metin Taşması Ayrı Bir Mekanizmadır Çıktının üçüncü bloğu farklı bir soruna işaret ediyor. Otuz altı karakterlik bir sözcük 160 birimlik bir kutuya sığmıyor ve 128 birim taşıyor. Bu, `overflow` ile çözülecek bir sorun değildir — sözcüğün **bölünmesi** gerekir. Satır bölme kuralları ayrı özelliklerle yönetilir: `overflow-wrap: anywhere` — sığmayan bir sözcüğü herhangi bir noktadan böler. Çıktının son satırlarında bölünme bu kurala göre gösterildi. `break-word` değeri benzer iş görür ama kutunun en küçük içerik ölçüsü hesabına katılmaz. `word-break: break-all` — sözcükleri sığmasalar da sığsalar da böler; sözcük bütünlüğünü gözetmez. `hyphens: auto` — belgenin diline göre heceleme yapar ve bölünme noktasına tire koyar. `lang` özniteliğinin bildirilmiş olmasını gerektirir; Web'in Temelleri ve HTML kursunda kök ögeye yazılan `lang="tr"` bildiriminin bir karşılığı da budur. `white-space: nowrap` — tersini yapar: satır bölünmesini büsbütün engeller. Bu, taşmayı önlemez, garantiler. `text-overflow: ellipsis` — taşan metnin sonuna üç nokta koyar. Yalnız çalışmaz; kutunun kırpıyor ve tek satır olması gerekir: ```css .istasyon-adi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` Üç bildirim birlikte yazılır. Kırpılan metnin kaybolduğunu unutmamak gerekir: tam ad bir `title` özniteliğinde ya da başka bir yerde erişilebilir kalmalıdır. ```css /* istasyon.css — 15. adım: taşma */ .cizelge-sarmalayici { overflow-x: auto; overscroll-behavior-x: contain; } .olcum-cizelgesi { min-width: 40rem; } .kart .aciklama { overflow-wrap: anywhere; hyphens: auto; } .konum-gorseli img { overflow: clip; } ``` `.cizelge-sarmalayici` çizelgeyi dar ekranda yatay kaydırılabilir yapar; `min-width` bildirimi çizelgenin sıkışıp okunmaz hâle gelmesini önler. İkisi birlikte, çizelgeyi küçültmek yerine kaydırmayı seçmiş olur. `overscroll-behavior-x: contain`, kutunun kaydırması bittiğinde sayfanın kaymasını engeller — kaydırma zincirinin o kutuda durmasını sağlar. ## Özet - Taşmanın varsayılan davranışı görünürlüktür: içerik kutunun dışına çıkar ve okunabilir kalır. Bu, kaybolan içeriğin bozulan düzenden kötü olduğu kabulüne dayanır. - `hidden` ve `clip` kırpar, `scroll` her zaman kaydırma çubuğu gösterir, `auto` yalnızca gerektiğinde gösterir; içerik sığdığında `scroll` yine kaydırılabilir bir kutu üretir. - `overflow` değerinin `visible` dışında olması kutuyu bağımsız akış kökü yapar; kaydırılmış çocukları içerir ve dış boşluk çökmesini sınırında durdurur. - İki eksen bağımsız değildir: bir eksen kırparken diğeri `visible` kalamaz, `auto` gibi işlenir. - Sığmayan bir sözcük `overflow` ile değil, satır bölme özellikleriyle çözülür; `text-overflow: ellipsis` yalnız çalışmaz, kırpma ve tek satır bildirimleriyle birlikte yazılır. ## Sonraki Adım Bu konu kutuların ölçüsünü, dizilişini ve sınırlarını kurdu. Ortaya çıkan sayfa yapılı ama renksiz: bütün kararlar geometriye ilişkindi. Sonraki konu görsel özellikleri ele alır ve ilk soru rengin kendisidir — bir rengin nasıl yazıldığı, hangi uzayda tanımlandığı ve iki renk arasındaki kontrastın nasıl bir sayıya dönüştüğü.