CSS ile Uzun Metni Üç Nokta ile Sınırlandırma

Hiç bir kart bileşeninde ürün başlığının taşarak tasarımı bozduğunu gördünüz mü? Ya da bir tablo hücresinde e-posta adresinin bir sonraki sütuna taştığını? Bu sorun, frontend geliştirmenin en sık karşılaşılan ve doğru yaklaşım bilinmediğinde en sinir bozucu problemlerinden biridir.

CSS'in text-overflow özelliği, bu sorunu zarif bir biçimde çözer. Ancak bu özelliği çalıştırmak için yalnızca tek bir satır yazmak yetmez; beklenen üç koşulun birlikte sağlanması gerekir. Bu rehberde hem tek satır hem de çok satır elipsis senaryolarını, pratik örneklerle ve sık yapılan hatalarla birlikte ele alacağız.

---

text-overflow Nedir ve Neden Önemlidir?

text-overflow, bir öğenin sınırlarını aşan metin içeriğinin nasıl görüntüleneceğini kontrol eden bir CSS özelliğidir. Değerleri oldukça sınırlıdır: clip (varsayılan, metni keser) ve ellipsis (metnin sonuna … karakteri ekler).

Kullanıcı deneyimi açısından düşünüldüğünde bu özellik küçücük bir CSS satırı gibi görünse de etkisi büyüktür. Tasarım sistemlerinde, UI kütüphanelerinde ve ürün kartlarında neredeyse her yerde karşımıza çıkar. Başlık alanları, navigasyon linkleri, tablo hücreleri, dropdown seçenekleri — liste uzar gider.

---

Tek Satır Elipsis: Üç Koşullu Kural

text-overflow: ellipsis çalışması için aynı anda üç CSS özelliğinin birlikte tanımlanması zorunludur. Bu üçlüyü ezberlemek yerine mantığını anlamak çok daha faydalıdır.

.truncate {
  white-space: nowrap;       /* 1. Metnin alta kaymasını engelle */
  overflow: hidden;          /* 2. Taşan kısmı gizle */
  text-overflow: ellipsis;   /* 3. Gizlenen yere ... koy */
}

Neden Bu Üçü Birlikte?

white-space: nowrap olmadan metin normal şekilde alta kayar ve tek satırda kalmazsınız. Alt satıra geçen bir metin için ellipsis zaten anlamsız olur.

overflow: hidden olmadan taşan metin görünür kalır; text-overflow ise yalnızca overflow değeri hidden, scroll veya auto olduğunda devreye girer. Bu özellik, W3C spesifikasyonunda açıkça belirtilmiş bir gereksinimdir.

text-overflow: ellipsis ise overflow gizlendikten sonra kesim noktasına … (üç nokta) karakterini yerleştirir.

Bunlardan herhangi birini çıkardığınızda ya metin taşar ya da sert bir şekilde kesilir, ama üç nokta görünmez.

---

Genişlik Zorunluluğu

Çok sık atlanan bir nokta daha var: elipsis çalışması için öğenin belirli bir genişliğe ihtiyacı vardır. Bu, sabit bir px değeri olmak zorunda değildir. %, max-width, flex veya grid kısıtlamaları da işe yarar. Öğe ebeveyninden genişliğini alamıyorsa veya display: inline olarak davranıyorsa, text-overflow çalışmaz.

/* Çalışmaz: inline öğe */
span.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Çalışır: block veya inline-block */
span.truncate {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

Çok Satır Elipsis: -webkit-line-clamp

Tek satır kırpma birçok senaryoyu karşılar, ama özellikle ürün açıklamaları, blog özetleri veya yorum metinleri gibi içeriklerde metni belirli bir satır sayısından sonra kesmek gerekir. Burada line-clamp devreye girer.

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Bu teknik uzun süre yalnızca WebKit tabanlı tarayıcılarda (Chrome, Safari) çalışıyordu. Ancak artık tüm modern tarayıcılar tarafından desteklenmektedir. Firefox de dahil olmak üzere 2023 itibarıyla line-clamp geniş bir tarayıcı desteğine ulaşmıştır.

Standart line-clamp (Yeni Sözdizimi)

CSS Overflow Level 4 spesifikasyonu, -webkit- öneki olmadan line-clamp kullanımını tanımlamaktadır. Ancak tarayıcı desteği henüz tam değildir, bu nedenle aşağıdaki gibi her iki sözdizimini birlikte kullanmak güvenli bir pratik olmaya devam etmektedir:

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  /* Standart sözdizimi (ileriye dönük) */
  line-clamp: 4;
}

---

Tailwind CSS ile Elipsis

Tailwind kullanıyorsanız, sık kullanılan durumlar için hazır yardımcı sınıflar mevcuttur.

Tek Satır

<p class="truncate w-48">Bu çok uzun bir başlık metni burada kesilecek</p>

truncate sınıfı tam olarak şunu uygular:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Çok Satır (line-clamp)

Tailwind 3.3 ve sonrasında line-clamp eklentisi artık çekirdek kütüphaneye dahildir:

<p class="line-clamp-3">
  Bu paragraf üç satırdan sonra üç nokta ile kesilecek. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
</p>

Tailwind, 1'den 6'ya kadar line-clamp-{n} sınıfları sağlar. Özel bir değere ihtiyacınız varsa line-clamp-[10] şeklinde keyfi değer sözdizimini kullanabilirsiniz.

---

Flexbox ve Grid İçinde Elipsis: Gizli Tuzak

Flexbox veya Grid içindeki öğelerde text-overflow beklenmedik biçimde çalışmayabilir. Bunun nedeni, flex öğelerinin varsayılan olarak içeriklerine göre genişlemesidir.

Sorun

/* Üst öğe flex container */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bu çalışmaz: flex öğesi genişlemeye devam eder */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Çözüm

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* ← Bu satır kritik */
}

min-width: 0 neden bu kadar önemli? Flex öğelerinin varsayılan min-width değeri autodur ve bu, öğenin içeriği kadar genişleyebileceği anlamına gelir. min-width: 0 yazılarak bu davranış kırılır ve öğe kapsayıcı boyutuna göre sıkıştırılabilir hale gelir.

Grid'de de benzer bir problem yaşanır. Grid öğelerinde overflow: hidden doğrudan öğeye eklenmek yerine bir iç sarmalayıcıya eklenmesi gerekebilir; ya da min-width: 0 çözümü burada da geçerlidir.

---

Tooltip ile Tam Metni Gösterme

Elipsis kullanan bir alanda kullanıcılar tam metni görmek isteyebilir. En pratik çözüm title HTML özelliğidir:

<p class="truncate" title="Buraya tam uzun metin gelir">
  Buraya tam uzun metin gelir
</p>

Kullanıcı öğenin üzerine geldiğinde tarayıcı, yerel tooltip olarak tam metni gösterir. Bu, sıfır JavaScript ile çalışan zarif bir çözümdür. Ancak mobil cihazlarda hover durumu olmadığı için title tooltip'i tetiklenemez. Mobil kullanıcılar için "Devamını oku" gibi bir toggle ya da JavaScript tabanlı özel bir tooltip tercih edilmelidir.

---

JavaScript ile Dinamik Elipsis Kontrolü

Bazı senaryolarda metnin gerçekten kesilip kesilmediğini programatik olarak tespit etmek gerekir:

function isTruncated(element) {
  return element.scrollWidth > element.clientWidth;
}

const titleEl = document.querySelector('.card-title');
if (isTruncated(titleEl)) {
  titleEl.setAttribute('title', titleEl.textContent);
}

Bu yaklaşım, yalnızca gerçekten kesilen öğelere tooltip eklemek için kullanışlıdır. Gereksiz tooltip'lerden kaçınılır ve kullanıcı deneyimi iyileşir.

---

RTL (Sağdan Sola) Dil Desteği

Arapça veya İbranice gibi RTL dillerde elipsis, metnin sonunda (sol tarafta) görünmelidir:

[dir="rtl"] .truncate {
  text-overflow: ellipsis; /* tarayıcılar RTL'de bunu otomatik olarak sola uygular */
}

Modern tarayıcılar dir="rtl" veya direction: rtl tanımlı öğelerde elipsis'i otomatik olarak doğru tarafa yerleştirir. Özel bir müdahaleye gerek yoktur.

---

Özel Elipsis Karakteri

text-overflow, string değeri de kabul eder, yani üç noktayı istediğiniz herhangi bir karakterle değiştirebilirsiniz:

.custom-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " →";
}

Ancak bu özellik yalnızca Firefox tarafından desteklenmektedir. Chrome ve Safari'de string değeri yoksayılır ve clip davranışı gösterilir. Bu yüzden üretim ortamında kullanmaktan kaçının.

---

Sık Karşılaşılan Hatalar ve Çözümleri

Hata	Olası Neden	Çözüm
Elipsis görünmüyor	overflow: hidden eksik	Üç koşulu kontrol et
Elipsis görünmüyor	Öğe display: inline	inline-block veya block yap
Elipsis görünmüyor	Flexbox'ta genişlik kısıtlama yok	min-width: 0 ekle
Metin tamamen kesiliyor	text-overflow eksik	ellipsis ekle
Çok satır çalışmıyor	-webkit-box eksik	display: -webkit-box ile birlikte kullan
Grid'de çalışmıyor	Grid öğesi genişliyor	Sarmalayıcı div veya overflow: hidden grid öğesine

---

Gerçek Dünya Örneği: Ürün Kartı

<div class="product-card">
  <div class="product-info">
    <h2 class="product-title">Çok Uzun Bir Ürün Adı Burada Yer Alıyor</h2>
    <p class="product-description">
      Bu ürünün detaylı açıklaması birkaç cümle içerebilir ve kart tasarımını
      bozmaması için belirli bir satır sayısından sonra kesilmesi gerekir.
    </p>
  </div>
</div>

.product-card {
  width: 280px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.product-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.product-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

Bu örnek, tek satır başlık için text-overflow: ellipsis, çok satır açıklama için line-clamp kombinasyonunu gösterir.

---

Tarayıcı Desteği Özeti

Özellik	Chrome	Firefox	Safari	Edge
text-overflow: ellipsis	✅	✅	✅	✅
-webkit-line-clamp	✅	✅	✅	✅
text-overflow: <string>	❌	✅	❌	❌

text-overflow: ellipsis ve -webkit-line-clamp artık tüm modern tarayıcılarda güvenle kullanılabilir.

---

Sonuç

CSS ile metin kırpma, ilk bakışta basit görünen ama ayrıntılarını kaçırdığınızda saatler harcatabilecek bir konudur. Özetlemek gerekirse:

• Tek satır için white-space: nowrap, overflow: hidden ve text-overflow: ellipsis üçlüsünü birlikte kullanın.
• Flex veya Grid içinde mutlaka min-width: 0 ekleyin.
• Çok satır için -webkit-line-clamp artık güvenli ve yaygın kullanımdadır.
• Tailwind kullanıyorsanız truncate ve line-clamp-{n} sınıfları işinizi kolaylaştırır.
• Kullanıcıların tam metne ihtiyaç duyduğu yerlerde title özelliği veya JavaScript tabanlı tooltip tercih edin.

Bu teknikler doğru uygulandığında, metin taşması sorununu kullanıcıya fark ettirmeden çözmek mümkündür. Temiz tasarım, okunabilir kod ve sorunsuz bir kullanıcı deneyimi... Hepsi birkaç satır CSS ile.