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

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...

Başlatan: Maui - Güncelleme: 29 Mart 2022, 16:15:34 - Gösterim: 658

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

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


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.

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
Kerem imza


Deli tarafıma denk gelmeyin, zira orada ben bile hükümsüzüm...

Benzer Konular (5)

Clicky