Sitelerimizde içerik yayınlarken bazen içeriğin belli bir kısmını yazıp, sonuna üç nokta koymamız gerekebiliyor. Daha sonrasında devamı için tıklayın, tamamını oku gibi linkler verebiliyoruz. Bu işlemi yaparken genellikle back-end kısmında yapıyorduk. Gelen veriyi belli bir karaktere kadar sınırlayıp, sonuna üç nokta ekliyoruz. Fakat bunun css ile çok daha kolay ve kullanışlı bir yolu var. Aynı zamanda yazılan metni kesmek zorunda kalmadığınız için seo açısından da faydalı bir durum oluyor. Çok uzatmadan nasıl yapabileceğimize bir bakalım.
Bu konuda bize yardımcı olacak css özelliği text-overflow. Aynı zamanda bu işlemi daha düzenli bir şekilde yapmak için css'in overflow ve white-scape özelliklerinden de yararlanacağız. Bir örnekle inceleyelim.
Burada görüleceği gibi ilk div kullanımımızda veri aynen yazıldı. Herhangi bir sınır koyamadık. Fakat ikinci kullanımımızda oluşturduğumuz div'e three-dot class'ını atayarak istediğimiz sonucu elde ettik. Böylece back-end kısmında herhangi bir zahmete girmeden yazımızı sınırlandırmış ve sonuna üç nokta eklemiş olduk.
Sonuç olarak bu işlemi yapan tam kodlarımıza bakacak olursak;
div {
width: 100px;
overflow: hidden; /* taşacak kısımları gizle. */
white-space: nowrap; /* alt satırı gösterme, alt satıra inme. */
text-overflow: ellipsis; /* uzunsa sonuna üç nokta koy. */
}
Bu kısımda width özelliğinin değerini ne kadar fazla verirsek, içeriğimizde o kadar fazla görünür. Değiştirip test edebilirsiniz. text-overflow özelliği hakkında biraz daha bilgi almak ve alternatif kullanımları görmek için css-tricks'den veya w3schools'dan faydalanabilirsiniz. Soru veya önerilerinizi yorum olarak yazabilirsiniz.
Kolay gelsin!