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

Uzun makalelerinizi istediğiniz bir satırda kesmek ve sonuna 3 nokta eklemek ister misiniz? Hem de bu işlemi yapmak için backend yada JavaScript’e gereksinim duymayacağınızı söylesek?

Karşınızda -webkit-line-clamp

CSS ile Satır Iyi mi Kesilir?

-webkit-line-clamp güncel bir CSS tanımı. Bu yapı fazlaca popüler olsa da hemen hemen IE ve Firefox desteğini görmemekte. Buna karşın Chrome, Safari, Opera ve birçok mobil tarayıcı -webkit-line-clamp kullanmanıza müsade etmekte.

HTML Kodları

Mesela bir paragrafımız olsun ve içinde uzun bir metnimiz olsun.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing seçkin. 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;

Netice

Böylece satır sınırlama işlemini birkaç satır CSS kodu yazarak tamamladık. Burada mühim kısım ise Firefox yada IE’den devasa yükseklikte trafik alan bir site üstünde bu işlemden kaçınmanız gerekmekte.

Tam sayfa görüntüle