• Web sitemizin içeriğine ve tüm hizmetlerimize erişim sağlamak için Web sitemize kayıt olmalı ya da giriş yapmalısınız. Web sitemize üye olmak tamamen ücretsizdir.
  • Soru mu? Sorun mu? ''Bir Sorum Var?'' sistemimiz aktiftir. Paylaşın beraber çözüm üretelim.

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

Kerem

MFC Üyesi
Üyelik Tarihi
21 Mar 2013
Konular
19
Mesajlar
157
MFC Puanı
2,300
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Ç:


webkit-line-clamp.jpg

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