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

Vatanay Özbeyli CSS3

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.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc lorem, gravida at ullamcorper id, faucibus id augue. Nullam feugiat consequat faucibus. Nam elementum lacus eget orci blandit eleifend. Proin euismod mauris purus, nec aliquet justo ullamcorper at. Curabitur ultricies dictum laoreet. Curabitur condimentum fermentum turpis, in varius lectus feugiat vestibulum. Vestibulum nec ligula vitae risus volutpat congue sed quis ipsum.</p>

Ş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. Burada önemli kısım ise Firefox veya IE’den çok yüksek trafik alan bir site üzerinde bu işlemden kaçınmanız gerekmekte.


Tam sayfa görüntüle