CSS Metin Kaydırma: white-space, overflow-wrap, word-break ve text-wrap

Metin neden kutudan taşar?

Tarayıcı bir paragrafı satırlara bölerken yalnızca yumuşak kaydırma fırsatlarını kullanır. Türkçe ve İngilizce gibi kelimeleri boşlukla ayıran dillerde bu fırsatlar çoğunlukla boşluk karakterleridir. Boşluk içermeyen çok uzun bir dize (uzun bir kelime, bir URL, bir dosya yolu ya da bir karma değer) tek bir bölünemez parça gibi davranır. Kutu bu parçadan darsa, parça satır yönünde kutunun dışına taşar.

MDN bu davranışın bilinçli olduğunu vurgular: CSS, içeriğin kaybolmasını (veri kaybını) istemediği için overflow özelliğinin başlangıç değeri visible olarak tanımlanmıştır. Taşan metin çirkin görünse bile en azından fark edilir ve okunabilir. overflow: hidden verdiğinizde ise taşan kısım sessizce kırpılır; sitenizi önizlerken bu kaybı gözden kaçırabilirsiniz. Bu yüzden taşmayı gizlemek yerine metnin düzgün bölünmesini sağlamak çoğu zaman daha doğru yaklaşımdır.

Kutunun genişliğini sabit tutmak zorunda değilseniz başka bir seçenek de vardır: width ya da inline-size özelliğine min-content vermek. Bu anahtar kelime, kutuyu içeriği taşmadan barındırabilecek en küçük genişliğe ayarlar. Yani kutu en uzun bölünemez parça kadar genişler ama daha fazla büyümez.

.kutu {
  inline-size: 150px;
  border: 4px solid #f76707;
  padding: 10px;
  /* uzun tek kelime 150px kutunun sağ kenarından dışarı taşar */
}

.kutu-icerige-gore {
  inline-size: min-content;
  /* kutu en uzun kelime kadar genişler, taşma olmaz */
}

white-space: boşluklar ve satır kaydırma

white-space, bir öğenin içindeki boşlukların nasıl işleneceğini belirleyen bir kısayoldur ve aynı anda iki soruyu yanıtlar: Art arda gelen boşluklar tek boşluğa indirilsin mi (çökertme), ve satırlar gerektiğinde kaysın mı? MDN'ye göre bu kısayol iki uzun özellikten oluşur: white-space-collapse (boşlukların çökertilmesi) ve text-wrap-mode (satır kaydırmanın açık ya da kapalı olması). Belirtimde üçüncü bir bileşen olarak white-space-trim da tanımlı, ancak MDN bunun henüz hiçbir tarayıcıda uygulanmadığını not eder.

Varsayılan davranışta tarayıcı kaynak koddaki boşlukları büyük ölçüde temizler. MDN'nin boşluk rehberi bu işlemi adım adım anlatır: Önce satır sonlarından hemen önce ve sonra gelen boşluk ve sekmeler atılır, ardışık satır sonları teke indirilir, kalan satır sonları (kelimeleri boşlukla ayıran dillerde) boşluğa dönüştürülür, sekmeler boşluğa çevrilir ve son olarak art arda gelen boşlukların yalnızca ilki tutulur. HTML'de kodunuzu girintilemenizin sayfada görünmemesinin nedeni budur. Kesintisiz boşluk karakteri ( ) bu listede yer almadığı için çökertilmez.

white-space için en sık kullanılan dört özel anahtar kelime ve uzun özelliklerdeki karşılıkları şöyledir:

Tablodaki farkı somutlaştıralım: pre kaynak koddaki her boşluğu ve satır sonunu aynen gösterir ama satırları yalnızca kaynaktaki satır sonlarında ve <br> öğelerinde böler; uzun bir satır kutudan taşar. pre-wrap aynı korumayı yapar, üstüne satırı kutuya sığmadığında da kaydırır. pre-line ise satır sonlarını korurken art arda gelen boşlukları teke indirir; kullanıcının yazdığı ve satır sonları anlamlı olan bir yorum metnini göstermek için uygundur.

MDN bir ayrıntıya daha dikkat çeker: white-space başlangıçta altı anahtar kelimeli tek bir özellikti. Kısayola dönüştürülmesiyle birlikte nowrap artık text-wrap-mode değeri, break-spaces ise white-space-collapse değeri olarak yorumlanıyor. Bu değişiklik white-space: wrap, white-space: collapse ya da white-space: preserve nowrap gibi yeni yazımlara da kapı açtı. Sekme karakteri varsayılan olarak 8 boşluk genişliğindedir ve tab-size ile değiştirilebilir; normal, nowrap ve pre-line değerlerinde ise sekmeler boşluğa dönüştürülür.

/* kod örneklerinde girintiyi koru, uzun satırları kaydır */
pre {
  white-space: pre-wrap;
  tab-size: 4;
}

/* menü öğesi asla iki satıra bölünmesin */
.menu-ogesi {
  white-space: nowrap;
}

/* kullanıcı yorumları: satır sonları korunur, fazla boşluklar teke iner */
.yorum-metni {
  white-space: pre-line;
}

white-space-collapse özelliğini tek başına da kullanabilirsiniz. Değerleri collapse, preserve, preserve-breaks, preserve-spaces ve break-spaces şeklindedir. preserve-spaces boşlukları korur ama sekmeleri ve satır sonlarını boşluğa çevirir. break-spaces ise preserve gibi davranır, ancak satır sonundaki boşluklar da yer kaplar ve her korunan boşluk karakterinden sonra bir kaydırma fırsatı oluşur. Belirtimdeki discard değerinin hiçbir tarayıcıda desteklenmediğini MDN ayrıca belirtir.

overflow-wrap: sığmayan kelimeyi bölmek

overflow-wrap, normalde bölünemeyen bir dizenin satır kutusunu taşırmaması için tarayıcının onun içine satır sonu koymasına izin verip vermeyeceğini belirler. Bu özelliğin en önemli niteliği temkinli olmasıdır: Bir kelimeyi yalnızca o kelime kendi başına yeni bir satıra konduğunda bile sığmıyorsa böler. Sığabiliyorsa önce kelimeyi alt satıra taşır, kelimenin içine dokunmaz.

• normal: Satırlar yalnızca olağan kelime sınırlarında (örneğin iki kelime arasındaki boşlukta) bölünür.
• anywhere: Satırda başka kabul edilebilir bölme noktası yoksa uzun kelime ya da URL herhangi bir noktadan bölünebilir. Bölme noktasına tire eklenmez. Bu bölmelerin yarattığı kaydırma fırsatları min-content iç boyutu hesaplanırken dikkate alınır.
• break-word: Bölme davranışı anywhere ile aynıdır, tek fark bu kaydırma fırsatlarının min-content hesabında dikkate alınmamasıdır.

Son madde ilk bakışta önemsiz görünür ama pratikte fark yaratır. Genişliği min-content olan bir kutuyu, bir tablo hücresini ya da içeriğine göre daralan bir flex öğesini düşünün. break-word ile tarayıcı en küçük genişliği hesaplarken uzun kelimeyi hâlâ bütün bir parça sayar; bu yüzden kutu o kelime kadar geniş kalır. anywhere ile ise kelimenin bölünebileceği hesaba katılır ve kutu çok daha dar olabilir. İçeriğe göre boyutlanan kapsayıcılarda break-word işe yaramıyor gibi görünüyorsa sebep çoğunlukla budur.

Eski kodlarda sık rastlanan word-wrap özelliği aslında Microsoft'un standart dışı bir eklentisi olarak doğdu ve birçok tarayıcı tarafından aynı adla uygulandı. Daha sonra overflow-wrap adını aldı; MDN'ye göre tarayıcılar word-wrap yazımını bugün standart özelliğin takma adı olarak ele alıyor. Yeni kodda overflow-wrap yazmanız yeterlidir.

word-break: kelimenin tam taşma noktasında bölünmesi

word-break farklı bir mantıkla çalışır. MDN'nin karşılaştırmasına göre word-break: break-all, metnin kutuyu taşıracağı noktada kelimeyi tam oradan böler; kelimenin tamamını yeni satıra taşımak bölmeyi gereksiz kılacak olsa bile. Yani overflow-wrap önce kelimeyi alt satıra taşımayı denerken break-all satırı sonuna kadar doldurur ve harf ortasından keser.

• normal: Varsayılan satır bölme kuralı kullanılır.
• break-all: Taşmayı önlemek için herhangi iki karakter arasına kelime sonu konabilir (Çince, Japonca ve Korece metin hariç).
• keep-all: Çince, Japonca ve Korece (CJK) metinde kelime içi bölme kullanılmaz; diğer dillerde normal ile aynı davranır.
• auto-phrase: normal gibi davranır ama dile özgü bir analizle doğal ifadelerin ortasında bölme yapmaktan kaçınır. MDN sözdizimi bölümünde bu değeri deneysel olarak işaretler.
• break-word: overflow-wrap özelliğinin değeri ne olursa olsun overflow-wrap: anywhere ile word-break: normal birleşimi gibi davranır. MDN sözdizimi bölümünde bu değeri kullanımdan kaldırılmış olarak gösterir; yerine doğrudan overflow-wrap: anywhere yazın.

break-all ne zaman işe yarar? MDN iki durumu örnek verir: Dizenin sığacak kadar yeri olduğu bir satırda büyük bir boşluk oluşmasını istemediğinizde ve bölmenin belirli bir öğeden hemen sonra olmasını istemediğinizde. Örneğin bir onay kutusunun yanındaki çok uzun etiket overflow-wrap ile bütünüyle alt satıra iner ve onay kutusu üst satırda yalnız kalır; break-all ise etiketi onay kutusunun yanında başlatıp taşma noktasında böler.

.kutu {
  inline-size: 30ch;
  border: 4px solid #f76707;
  padding: 10px;
}

.kutu-bir {
  word-break: break-all;
  /* uzun kelime ilk satırın sonuna kadar doldurulur, tam taşma noktasında kesilir */
}

.kutu-iki {
  overflow-wrap: break-word;
  /* uzun kelime önce alt satıra iner, orada da sığmazsa bölünür */
}

hyphens: bölünen kelimeye tire eklemek

overflow-wrap ve word-break kelimeyi böler ama bölme noktasına tire koymaz. Okuyucuya kelimenin devam ettiğini göstermek istiyorsanız hyphens özelliğini kullanırsınız. Üç değeri vardır:

• none: Kelimeler, içlerinde bölme noktası öneren karakterler olsa bile satır sonunda bölünmez; satırlar yalnızca boşluklarda kayar.
• manual: Varsayılan değerdir. Kelimeler yalnızca içlerindeki karakterlerin bölme fırsatı önerdiği yerlerde bölünür.
• auto: Tarayıcı uygun heceleme noktalarını kendi kurallarına göre seçebilir. Metinde elle önerilmiş bölme noktaları varsa bunlar otomatik seçimin önüne geçer.

Elle bölme noktası önermenin iki yolu vardır. Görünür "sert" tire karakteri (U+2010) satır orada bölünmese bile her zaman çizilir. Görünmez "yumuşak" tire (U+00AD) ise yalnızca bölme gerektiğinde tireye dönüşür; HTML'de ­ varlığıyla yazılır. HTML'deki <wbr> öğesi de bir bölme fırsatı oluşturur, ancak MDN'ye göre bu öğe satır sonuna yol açtığında tire eklenmez. Uzun URL'leri anlamlı parçalardan bölmek için bu yüzden <wbr> tercih edilir.

<p class="kutu">Çekoslovakyalılaştıramadıklarımızdan&shy;mısınız</p>
<p class="kutu">https://ornek.com/<wbr>belgeler/<wbr>cok-uzun-bir-yol</p>

.kutu {
  inline-size: 150px;
  overflow-wrap: break-word;
  hyphens: manual;
  /* ilk paragraf yumuşak tirenin olduğu yerde bölünürse satır sonuna tire konur */
  /* ikinci paragraf wbr noktalarında bölünür, tire eklenmez */
}

hyphens: auto kullanırken en kritik ayrıntı dildir. Heceleme kuralları dile özgüdür ve MDN'ye göre tarayıcılar ancak HTML'de lang özniteliği bulunduğunda ve o dil için uygun heceleme sözlüğü mevcutsa otomatik heceleme yapar. Sayfanızda lang yoksa ya da tarayıcının o dil için sözlüğü yoksa auto görünür bir etki yaratmayabilir. Ayrıca iki etkileşime dikkat edin: word-break: break-all uygulanmışsa kelime bir heceleme noktasında bölünse bile tire gösterilmez; text-wrap-mode: nowrap ise kaydırmayı tamamen kapattığı için tire de çıkmaz.

Satır sonuna konan karakteri değiştirmek için hyphenate-character, hecelemenin uygulanacağı en kısa kelime uzunluğunu ve tirenin öncesinde ve sonrasında kalması gereken en az karakter sayısını belirlemek için hyphenate-limit-chars özelliği vardır. Bu iki özellik ince ayar içindir; temel davranışı her zaman hyphens belirler.

text-wrap: daha dengeli satırlar

Şimdiye kadarki özellikler satırın nerede bölünebileceğini belirliyordu. text-wrap ise tarayıcıya mevcut bölme fırsatları arasından hangisini seçmesi gerektiği konusunda ipucu verir. MDN bu kısayolu iki uzun özelliğe ayırır: kaydırmanın açık ya da kapalı olduğunu belirleyen text-wrap-mode (wrap ya da nowrap) ve kaydırmanın üslubunu belirleyen text-wrap-style (auto, balance, pretty, stable).

• wrap: Varsayılandır; metin taşmayı en aza indirecek şekilde uygun karakterlerde kayar.
• nowrap: Metin hiç kaymaz ve kapsayıcısından taşar.
• balance: Satırlardaki karakter sayılarını olabildiğince eşitler. Bu hesap pahalı olduğundan tarayıcılar yalnızca sınırlı sayıda satıra uygular; MDN Chromium için altı, Firefox için on satırı sınır olarak verir. Başlık, resim altı yazısı ve alıntı gibi kısa metinler için tasarlanmıştır.
• pretty: wrap gibi davranır ama hızdan çok düzgün yerleşimi önemseyen daha yavaş bir algoritma kullanır. Son satırda tek kalan kelime gibi durumları azaltmak istediğiniz gövde metni içindir.
• stable: Kullanıcı contenteditable bir alanda metni düzenlerken, düzenlenen satırdan önceki satırların yerinde kalmasını ve bütün bloğun yeniden kaydırılmamasını sağlar.

MDN performans konusunda net bir yönlendirme yapar: balance zaten sınırlı satıra uygulandığı için performansa etkisi önemsizdir, bu yüzden başlıklarda gönül rahatlığıyla kullanılabilir. pretty ise performansı olumsuz etkiler; yalnızca yerleşimin hızdan daha önemli olduğu uzun metin bloklarında tercih edilmelidir. Belirtimde son satırların çok kısa kalmasını önleyen bir avoid-orphans değeri de tanımlı, ancak MDN bunun henüz hiçbir tarayıcıda desteklenmediğini belirtir. text-wrap-mode nowrap olduğunda text-wrap-style değerinin hiçbir etkisi yoktur.

h1,
h2,
figcaption {
  text-wrap: balance;
  /* iki satırlık başlıkta satırlar yaklaşık eşit uzunlukta olur */
}

article p {
  text-wrap: pretty;
  /* son satırda tek kelime kalması gibi durumlar azaltılır */
}

Uygulamalı mini örnek: blog kartı

Şimdi öğrendiklerimizi tek bir bileşende birleştirelim. Bir blog kartında başlık, kısa özet, kaynak bağlantısı olarak uzun bir URL ve bir kod parçası olduğunu düşünün. Her parçanın ihtiyacı farklıdır: Başlık dengeli satırlar ister, özet temiz bir son satır ister, URL kartı taşırmamalı, kod parçası ise girintisini korumalıdır.

.kart {
  inline-size: 320px;
  padding: 16px;
  border: 1px solid #cccccc;
}

.kart h3 {
  text-wrap: balance;
}

.kart p {
  text-wrap: pretty;
  hyphens: auto; /* yalnızca lang özniteliği ve sözlük varsa etkili */
}

.kart .kaynak {
  overflow-wrap: anywhere;
  /* uzun URL kartın içinde bölünür, kart içeriğe göre daralsa bile taşmaz */
}

.kart pre {
  white-space: pre-wrap;
  /* girinti korunur, uzun satır kartın genişliğinde kayar */
}

Burada URL için break-word yerine anywhere seçmemizin nedeni, kartın ileride bir flex ya da grid düzeninde içeriğe göre boyutlanma ihtimalidir. anywhere, bölme fırsatlarını min-content hesabına da kattığı için kart dar alanlarda gereksiz yere genişlemez. URL'ler genellikle kelime gibi okunmadığından tire eklemek de istemeyiz; bu yüzden URL'ye hyphens vermedik.

Sık yapılan hatalar

• Her yere word-break: break-all vermek: Uzun URL sorununu çözer ama sıradan kelimeleri de satır sonunda harf ortasından keser ve okunabilirliği bozar. Çoğu durumda overflow-wrap: anywhere ya da break-word daha nazik bir çözümdür.
• white-space: nowrap verip taşmayı yönetmemek: Kaydırmayı kapattığınızda uzun metin kapsayıcıdan çıkar. Ya kapsayıcıya satır yönünde kaydırma ekleyin ya da metni kısaltmanın yollarını overflow yazısında anlatılan text-overflow ile birlikte kullanın.
• hyphens: auto verip lang unutmak: Dil belirtilmezse tarayıcı heceleme kuralı seçemez ve tire görünmez.
• İçeriğe göre boyutlanan kutuda break-word beklemek: min-content hesabında bölme fırsatları sayılmadığından kutu yine uzun kelime kadar geniş kalabilir; anywhere deneyin.
• Uzun paragraflarda balance beklemek: Tarayıcılar dengelemeyi sınırlı satır sayısına uygular; uzun gövde metni için pretty doğru seçimdir.
• Kelimeyi bölmek için white-space aramak: MDN açıkça not eder: Kelimelerin kendi içinde bölünmesi white-space ile değil overflow-wrap, word-break ya da hyphens ile yapılır.

Sık Sorulan Sorular

overflow-wrap ile word-break arasındaki temel fark nedir?

overflow-wrap bir kelimeyi yalnızca o kelime kendi satırına konduğunda bile sığmıyorsa böler; önce kelimeyi alt satıra taşımayı dener. word-break: break-all ise kelimeyi metnin taşacağı noktada hemen böler, alt satıra taşımanın bölmeyi gereksiz kılacağı durumlarda bile. Okunabilirlik önemliyse ilki, satırları sonuna kadar doldurmak önemliyse ikincisi uygundur.

word-wrap hâlâ kullanılabilir mi?

word-wrap, overflow-wrap özelliğinin eski adıdır ve MDN'ye göre tarayıcılar onu standart özelliğin takma adı olarak işler. Eski kodda çalışmaya devam eder, ancak yeni kodda standart ad olan overflow-wrap yazılması önerilir.

Türkçe metinde hyphens: auto çalışır mı?

Bu, tarayıcının Türkçe için bir heceleme sözlüğüne sahip olmasına bağlıdır. MDN, otomatik hecelemenin yalnızca lang özniteliği varken ve uygun sözlük bulunduğunda yapıldığını belirtir. Sayfanıza lang="tr" ekleyin ve sonucu hedeflediğiniz tarayıcılarda deneyin; kritik yerlerde yumuşak tire (­) ile elle bölme noktası önermek daha öngörülebilir sonuç verir.

pre içindeki uzun satırları nasıl kaydırırım?

MDN'nin white-space sayfası bu iş için doğrudan pre { white-space: pre-wrap; } kuralını örnek verir. pre-wrap boşlukları ve satır sonlarını korur, buna ek olarak satır kutuya sığmadığında onu kaydırır; böylece girinti bozulmadan uzun satırlar kutu genişliğinde alt satıra geçer. Kaydırmak yerine yatay kaydırma çubuğu tercih ediyorsanız taşmayı overflow özellikleriyle yönetin.

text-wrap: balance hangi metinlerde kullanılmalı?

Başlıklar, resim altı yazıları ve kısa alıntılar gibi birkaç satırlık metinlerde. Tarayıcılar dengelemeyi sınırlı sayıda satıra uyguladığı için performans etkisi önemsizdir. Uzun paragraflarda dengeleme uygulanmaz; orada text-wrap: pretty daha uygundur.

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 · CSS overflow: taşma ve kaydırma · CSS @font-face ve yazı tipi özellikleri · CSS birimleri: px, em, rem, vw · CSS calc(), min(), max(), clamp() · Mobil uyumluluk nedir