Tailwind truncate, line-clamp ve Satır Kırma Sınıfları

truncate, text-ellipsis ve text-clip

Resmî text-overflow sayfası üç sınıf listeler ve derleme çıktısı onunla birebir aynıdır:

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.text-clip {
  text-overflow: clip;
}

truncate bir kısayoldur: satırın kırılmasını engeller, taşan kısmı gizler ve kesilen yere üç nokta koyar. text-ellipsis ise yalnızca text-overflow özelliğini yazar; tek başına bir şey kesmez, çünkü taşma gizlenmedikçe ve satır kırılmaya devam ettikçe kesilecek bir taşma yoktur. Resmî örnekler de bu yüzden overflow-hidden text-ellipsis çiftini kullanır. text-clip taşan metni üç nokta olmadan keser; sayfa bunun tarayıcının varsayılan davranışı olduğunu belirtir. Bu iki sınıf, truncate sınıfının ürettiği text-overflow değerini responsive olarak değiştirmek için de işe yarar: text-ellipsis md:text-clip gibi.

Üç noktanın görünmesi için metnin bir genişlik sınırına çarpması gerekir. Blok elemanlar varsayılan olarak ebeveynlerinin genişliğini alır, dolayısıyla çoğu durumda sınır kendiliğinden vardır. Satır içi bir <span> elemanında ise genişlik içeriğe göre belirlenir; truncate uygulamadan önce elemanı block veya inline-block yapıp bir max-w-* vermeniz gerekebilir. Display ve genişlik sınıfları display yazısında ve width ve height yazısında anlatılıyor.

Uygulamalı örnek: flex içinde truncate ve min-w-0

truncate ile ilgili en sık karşılaşılan şaşkınlık, metnin bir flex düzeninin içinde kesilmemesi, bunun yerine kutuyu taşırmasıdır. Resmî overflow-wrap sayfası bu durumun sebebini açıklar: bir flex öğesinin içeriğinin altına küçülebilmesi için normalde ona min-width: 0 vermeniz gerekir. Aşağıdaki kullanıcı satırı bu çözümü uyguluyor:

<div class="flex items-center gap-3">
  <img class="size-10 shrink-0 rounded-full" src="/avatar.jpg" alt="">
  <div class="min-w-0">
    <p class="truncate font-medium">Ayşe Yılmaz</p>
    <p class="truncate text-sm text-gray-500">ayse.yilmaz@ornek-sirket-adi.com.tr</p>
  </div>
</div>

v4.3.5 ile derlenen CSS (ilgili kurallar):

.flex {
  display: flex;
}
.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}
.min-w-0 {
  min-width: 0px;
}
.shrink-0 {
  flex-shrink: 0;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* (kısaltıldı) */

Burada iki karar var. Metin kutusu olan div, flex kapsayıcının doğrudan çocuğudur ve min-w-0 ile min-width: 0px alır; böylece içindeki uzun e-posta adresi kutunun en küçük genişliğini belirlemez ve kutu küçülebilir. Resim ise shrink-0 ile flex-shrink: 0 alır, yani yer daraldığında ezilmez. truncate sınıfları paragrafların üzerindedir; kapsayıcı daraldığında her paragraf kendi satırında üç noktayla kesilir. min-w-0 sınıfını paragrafın kendisine değil, flex öğesi olan sarmalayıcıya koymanız gerektiğini unutmayın. Flex öğelerinin küçülme davranışı flex-1, grow ve shrink yazısında ayrıntılı anlatılıyor.

Çok satırlı kesme: line-clamp-*

Bir kart özetini üç satırla sınırlamak için line-clamp-3 yazarsınız. Derleme çıktısı dört bildirimden oluşur:

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media (width >= 48rem) {
  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
  }
}

Sınıf, elemanın display değerini -webkit-box yapar. Bu ayrıntı önemlidir: aynı elemana flex veya grid gibi bir display sınıfı verirseniz iki sınıf aynı özelliği yazar ve biri diğerini ezer; satır kesme bozulur ya da düzen kaybolur. Kesmek istediğiniz metni ayrı bir elemana koymak en güvenli yoldur. line-clamp-none kesmeyi geri alır; resmî sayfadaki line-clamp-3 lg:line-clamp-none örneği, mobilde kısaltılmış, geniş ekranda tam görünen bir özet için kullanılır. Ancak çıktıya bakın: line-clamp-none display değerini block yapar, yani eleman önceden inline veya başka bir display değerine sahipse o değer geri gelmez.

Ölçek dışı bir sayı için köşeli parantez, değişken için normal parantez kullanılır. line-clamp-[7] çıktıda -webkit-line-clamp: 7, line-clamp-(--satir) ise -webkit-line-clamp: var(--satir) verdi. Değişkenli yazım, satır sayısını satır içi stil ile bileşen başına değiştirmek istediğinizde kullanışlıdır.

Boşluk ve satır sonu: whitespace-*

whitespace-* sınıfları white-space özelliğini yazar ve kaynak metindeki boşlukların ve satır sonlarının nasıl ele alınacağını belirler. Resmî sayfanın açıklamalarını özetleyen bir tablo:

Pratikte en işe yarayanı whitespace-pre-line'dır: bir veritabanından gelen ve içinde satır sonları bulunan düz metni, <br> eklemeden paragraf içinde satır satır göstermenizi sağlar. Kullanıcı yorumları veya adres alanları için iyi bir varsayılandır. whitespace-pre ise kod parçaları gibi her boşluğun anlamlı olduğu içerik içindir; satırı kaydırmadığı için uzun satırlar kutudan taşabilir. Resmî sayfa kaydırmayan bir metni overflow-auto ile eşleştirerek uzun satırların kaydırılabilir olmasını gösterir; aynı yaklaşım burada da geçerlidir.

Resmî sayfadaki örneği Türkçeleştirip derledik. HTML kaynağında satır sonu ve fazladan boşluklar bulunan bir paragraf:

<p class="whitespace-pre-line">Birinci satır
    İkinci satır     fazla   boşluklarla</p>

.whitespace-pre-line {
  white-space: pre-line;
}

pre-line değeriyle kaynaktaki satır sonu korunur, yani "İkinci satır" yeni bir satırda başlar. Satırın başındaki girinti ve kelimeler arasındaki fazla boşluklar ise tek boşluğa iner. Aynı paragrafa whitespace-pre-wrap verseydiniz girinti ve fazla boşluklar da olduğu gibi kalırdı; whitespace-normal verseydiniz satır sonu da boşluğa dönüşür ve iki satır tek satırda birleşirdi. Sınıfı değiştirmek tek başına yeterlidir; HTML'i yeniden düzenlemeniz gerekmez.

Uzun kelimeleri kırmak: break-* ve wrap-*

URL, e-posta adresi veya uzun bir dosya adı gibi boşluksuz dizgiler kapsayıcısını taşırabilir. Bunun için iki ayrı CSS özelliği ve iki sınıf ailesi vardır. wrap-* sınıfları overflow-wrap, break-* sınıfları word-break özelliğini yazar. v4.3.5 çıktısı:

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.wrap-anywhere {
  overflow-wrap: anywhere;
}
.wrap-break-word {
  overflow-wrap: break-word;
}
.wrap-normal {
  overflow-wrap: normal;
}
.break-all {
  word-break: break-all;
}
.break-keep {
  word-break: keep-all;
}

Resmî belgelere göre farklar şöyle: wrap-break-word bir kelime kapsayıcıyı taşıracaksa harflerin arasından kırılmasına izin verir. wrap-anywhere da aynı kırılmaya izin verir, ama bu kırılma noktalarını elemanın doğal en küçük genişliği hesaplanırken de hesaba katar. Sayfanın vurguladığı sonuç şu: wrap-anywhere kullanan bir flex öğesi, ayrıca min-w-0 gerekmeden küçülebilir. break-all kelimeleri bütün tutmaya hiç çalışmaz ve gereken her yerden kırar; break-keep ise Çince, Japonca ve Korece metinlerde karakterler arası kırılmayı engeller, diğer dillerde break-normal gibi davranır. Dikkat çekici bir ayrıntı: break-normal iki özelliği birden sıfırlar, wrap-normal ise yalnızca overflow-wrap değerini.

Eski notlarda ve örneklerde geçen break-words sınıfı v4.3.5 ile hâlâ derleniyor ve overflow-wrap: break-word veriyor. Ancak canonicalize komutu bu eski adı wrap-break-word olarak öneriyor; benzer şekilde eski ad overflow-ellipsis için önerilen ad text-ellipsis:

tailwindcss canonicalize break-words overflow-ellipsis
# wrap-break-word
# text-ellipsis

Dengeli satırlar: text-balance ve text-pretty

text-wrap özelliğini yazan dört sınıf vardır: text-wrap, text-nowrap, text-balance ve text-pretty. Resmî sayfaya göre text-balance metni satırlara eşit dağıtır ve başlıklar için önerilir; tarayıcılar performans nedeniyle dengelemeyi yaklaşık altı satır veya daha kısa bloklarla sınırlar, bu yüzden uzun paragraflarda beklediğiniz etkiyi vermez. text-pretty hızdan çok görünümü öncelikler; davranışı tarayıcıdan tarayıcıya değişse de çoğu zaman paragrafın son satırında tek bir kelimenin yalnız kalmasını önler. Aşağıdaki makale kartında başlık dengelenmiş, özet ise mobilde üç satırla sınırlanmıştır:

<article>
  <h3 class="text-balance">Sunucu taşıma sırasında dikkat edilmesi gerekenler</h3>
  <p class="line-clamp-3 md:line-clamp-none text-pretty">Uzun özet metni...</p>
</article>

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
@media (width >= 48rem) {
  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
  }
}

text-nowrap ile whitespace-nowrap benzer görünür ama farklı özellikleri yazar: ilki text-wrap: nowrap, ikincisi white-space: nowrap üretir. Resmî white-space sayfasına göre whitespace-nowrap ayrıca ardışık boşlukları ve satır sonlarını tek boşluğa indirir; yalnızca kaydırmayı engellemek istiyorsanız text-nowrap daha dar kapsamlı bir seçimdir. truncate sınıfının kendisi white-space: nowrap kullanır.

Hangi durumda hangi sınıf?

Bu kadar benzer sınıfın arasında seçim yaparken önce metnin ne olması gerektiğine karar verin. Metin tek satırda kalmalı ve sığmayan kısmı kesilmeli mi? O zaman truncate. Metin birkaç satıra yayılabilir ama belirli bir yüksekliği aşmamalı mı? O zaman line-clamp-*. Metin tamamen görünmeli ama uzun kelimeler kutuyu taşırmamalı mı? O zaman wrap-break-word, flex içinde daralma sorunu varsa wrap-anywhere. Kaynaktaki satır sonları korunmalı mı? O zaman whitespace-pre-line veya whitespace-pre-wrap. Metin tamamen görünecek ve sorun yalnızca satırların çirkin dağılması mı? O zaman başlıklarda text-balance, paragraflarda text-pretty.

Kesme sınıflarında içeriğin bir kısmı görünmez hale gelir; bu nedenle önemli bilginin kesilen bölümde kalmamasına dikkat edin. Kullanıcının tam metne ulaşabileceği bir yol (detay sayfası, açılır panel veya title niteliği) bırakmak iyi bir alışkanlıktır. Kırma sınıflarında ise içerik kaybolmaz, yalnızca satırlara farklı dağılır; bu yüzden kullanıcı tarafından girilen ve uzunluğunu kontrol edemediğiniz alanlarda (kullanıcı adı, e-posta, URL) önce kırma sınıflarını düşünmek daha güvenli bir başlangıçtır.

Sık yapılan hatalar

• text-ellipsis tek başına: Üç nokta için taşmanın gizlenmesi ve satırın kırılmaması gerekir. Tek sınıfla istiyorsanız truncate yazın.
• Flex içinde min-w-0 unutmak: truncate uygulanan metnin flex öğesi olan atasına min-w-0 verin ya da kırılmaya izin veriyorsanız wrap-anywhere kullanın.
• line-clamp ile display sınıfını aynı elemana koymak: line-clamp-* display değerini -webkit-box yapar; flex veya grid ile çakışır.
• line-clamp-none sonrası inline beklemek: Geri alma sınıfı display: block yazar; eleman blok olarak kalır.
• Uzun paragrafta text-balance: Dengeleme kısa bloklar içindir; gövde metninde text-pretty daha uygun bir seçimdir.
• Satır içi elemanda truncate: Genişliği olmayan bir span kesilmez; önce display ve genişlik verin.

Sık Sorulan Sorular

truncate ile line-clamp-1 aynı şey mi?

Görsel sonuç benzer olabilir ama CSS farklıdır. truncate white-space: nowrap ve text-overflow: ellipsis kullanır; line-clamp-1 ise display: -webkit-box ve -webkit-line-clamp: 1 ile çalışır ve elemanın display değerini değiştirir.

Uzun bir URL kartımı taşırıyor, ne yapmalıyım?

URL'yi içeren elemana wrap-break-word verin. Eleman bir flex öğesiyse ve hâlâ daralmıyorsa wrap-anywhere deneyin; resmî sayfaya göre bu değer kırılma noktalarını en küçük genişlik hesabına da katar.

break-words neden önerilmiyor?

v4.3.5 bu sınıfı hâlâ derliyor, fakat canonicalize komutu yerine wrap-break-word adını öneriyor. Yeni yazdığınız kodda kanonik adı kullanmak, ekip içinde aynı işi yapan iki farklı sınıf adının dolaşmasını önler.

line-clamp kullanan kartların yüksekliği neden farklı çıkıyor?

line-clamp-3 en fazla üç satır gösterir; metin daha kısaysa kart da daha kısa olur. Görünen yükseklik, satır sayısı ile satır yüksekliğinin çarpımına bağlıdır. Tüm kartların aynı hizada bitmesini istiyorsanız satır yüksekliğini text-sm/6 gibi sabit bir değerle verip kart düzenini grid ile kurmak işinizi kolaylaştırır; grid yerleşimi grid yazısında anlatılıyor.

truncate etkisini geniş ekranda nasıl kaldırırım?

truncate için ayrı bir geri alma sınıfı yoktur; yazdığı özellikleri tek tek geri alırsınız. truncate md:overflow-visible md:whitespace-normal derlendiğinde 48rem ve üzeri için overflow: visible ve white-space: normal kuralları üretildi. Satır artık kırılabildiği ve taşma gizlenmediği için metin tam görünür; text-overflow değeri kalsa bile kesilecek bir taşma olmadığından etkisizdir.

Satır sayısını responsive değiştirebilir miyim?

Evet. Resmî sayfadaki line-clamp-3 md:line-clamp-4 örneğinde olduğu gibi her kırılım için farklı bir sayı yazabilirsiniz. Kesmeyi geniş ekranda tamamen kaldırmak için line-clamp-none kullanılır; kırılım önekleri responsive tasarım yazısında anlatılıyor.

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: Tailwind öğrenme rehberi · Metin hizalama, leading ve tracking · Font size, weight, family · Overflow ve scroll · Flex öğeleri: grow ve shrink · CSS flexbox rehberi