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

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;