Blog Yazarı Olmak İster misin?

Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz. Blog Yaz!


Css Kullanarak Alana Sığmayan Yazıları Üç Nokta İle Kesmek

Css Kullanarak Alana Sığmayan Yazıları Üç Nokta İle Kesmek

Tahmini okuma 0 dakika 49 saniye Görüntülenme: 51

Başlıkta belirttiğimiz gibi bir div alanı içerisinde bulunan yazıyı tek satırda sabit tutup sığmadığı durumlarda sonuna üç(3) nokta koyarak kısaltıyoruz. Bunu eskiden Php ile yazı kısaltma fonksiyonu yazarak yapardık. Böyle bir yöntem kullanmak SEO'ya olumsuz anlamda etki etmekteydi. Css yönteminde ise böyle bir durum yok, ziyaretçinin ekran genişliğine göre görsel anlamda göze kısa gözükse bile kaynak kodu tarafında yazının tamamı verilmektedir. Haliyle yazının tamamı google botları tarafından başarı ile taranabilmektedir.

Kullanacağımız css kodu aşağıda ki gibidir.

.baslik {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.baslik classını verdiğimiz tüm başlıklarınız div alanına sığmadığı durumlarda üç(3) nokta ile sonlanacak bir alt satıra geçmeyecektir.

Canlı Örnek;

Bu yazı bu alana sığmayacak kadar uzun olduğundan css ile kısaltılmıştır


1 ay önce Özkan Işık tarafından yazıldı. Son güncelleme 29.08.2022 04:54

Yorum Yap


İlk yorumu yapan sen ol!
Blogtan Son Yazılar

Yeni Ürünlerden İlk Siz Haberdar Olun!

Şimdi abone olarak yeni ürün ve indirim kampanyalarından anında faydalanın!

veya üye olmak isteyebilirsiniz

Üye Ol