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.
|
1 2 3 |
<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.
|
1 2 3 4 5 6 |
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.
