CSS ile Satırı Sınırlama ve Sonuna 3 Nokta Eklemek
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.
HTML Kodları
Örneğin bir paragrafımız olsun ve içerisinde uzun bir metnimiz olsun.
<div class="box"> <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p> </div>
Şimdi bu paragrafa satır sınırı verelim.
CSS Kodları
Üstteki 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ç
Böylece satır sınırlama işlemini birkaç satır CSS kodu yazarak tamamladık. Gerekli kodlara buradan ulaşıp kendi ihtiyacınıza göre uyarlayabilirsiniz.
