Kategoriler
Kodlama

CSS text-overflow: ellipsis; kullanımı

CSS text-overflow: ellipsis; kullanımı hakıında örnekler.

Sayfada bir metnin yatay uzunluğunu kontrol etmek ve bu uzunluğu ilgili elemanın genişliğine göre kesmek için CSS‘de ellipsis özelliğini kullanabiliriz.

Örnek kullanım, bu kod .uzunisekes classına sahip metinleri 250px; genişliğe sığınmadığı taktirde kesip … ile bitirir:

.uzunisekes {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Basic Overflow Ellipsis

Farklı şekillerde de kullanılabilir, uzun yıllardır takip edttiğim CSS konusunda uzman bir blog olan css-tricks.com’dan daha fazlasını öğrenebilirsiniz: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ ayrıca kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow.

İyi çalışmalar 🐱‍👤

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr