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

Uzun makalelere özet görünümü sağlamak backend ile çözülmesi gereken bir konu fakat bazı durumlarda biz front-endcilerin halletmesi gereken bir durum haline gelebiliyor.

Senaryo: Birden fazla kutu var ve hepsinde üç satır metin olması gerekiyor fakat çekilen özet metin kelime saydığı zaman bu uzun kelimelerde satır sayısını aşmaya neden olabiliyor bunu JavaScript ile uzun bir yolla çözmek mümkünken CSS3 ile artık çok daha kolay!

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

Tüm tarayıcı desteklerini görmek için buraya göz atabilirsiniz.

caniuse.com#feat=css-line-clamp

Bir paragraftaki yazının 5. satırda kesilmesini ve sonuna 3 nokta eklenmesini sağlayalım.

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