CSS ile Satır Sayısını Sınırlama ve 3 Nokta Ekleme

Kerem · 14 Eyl 2022

Google search console da mobil kullanılabilirlik sekmesinde forumumuzun bazı linklerinin sayfaya sığmıyor gibi bir soruna neden olduğunu görünce çözüm olarak aşağıdaki uygulamayı yaptım ve faydasını gördüm. Tabi ilerleyen zamanlarda google ın başka bir sorun çıkarıp çıkarmayacağını göreceğiz. Aşağıda uyguladığım css kod ile uzunluğu sebebi ile iki satıra çıkan konu başlıklarını tek satıra düşürerek 3 nokta ile satırı kapattım. Css kodunu kendi sitenize göre düzenleyerek kullanabilirsiniz. Orjinal konunun linkinide aşağıya bırakacağım örnek sayfayıda oradan inceleyebilirsiniz.

Uzun makalelerinizi istediğiniz bir satırda kesmek ve sonuna 3 nokta eklemek ister misiniz? Hem de bu işlemi yapmak için backend veya JavaScript’e ihtiyaç duymayacağınızı söylesek?
Karşınızda -webkit-line-clamp

CSS ile Satır Nasıl Kesilir?
-webkit-line-clamp güncel bir CSS tanımı. Bu yapı çok popüler olsa da henüz IE ve Firefox desteğini görmemekte. Buna rağmen Chrome, Safari, Opera ve birçok mobil tarayıcı -webkit-line-clamp kullanmanıza müsade etmekte.

Paragraftaki yazının 2. satırda kesilmesini ve sonuna 3 nokta eklenmesini sağlayalım.

Kod:

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

SONUÇ:

Kaynak: https://www.adobewordpress.com/css-ile-satir-sayisi-sinirlama-sonuna-3-nokta-ekleme

CSS ile Satır Sayısını Sınırlama ve 3 Nokta Ekleme

Kerem