HizmetlerPortfolyoHakkımdaİletişimSatılık Domain
Yazıların sonları üç nokta koyarak yazıları kısmi olarak gösterebilirsiniz.
Merhaba,
Bu yazımda çok kullandığım bir yöntemi sizinle paylaşmak istiyorum.
Genellikle listeleme sayfalarında kullandığım bu yöntem ile içeriğin başlık veya kısa açıklama alanlarında maksimum bir yükseklik tanımlayarak tasarımın daha stabil ve düzgün olmasını sağlıyorum.
Örnek olarak sitemdeki bloglar sayfasındaki listelemeyi inceleyebilirsiniz. Başlık 2 satırlık ve kısa açıklama alanında 3 satırlık sınır var ve aldığı karakter sayısını aştığında üç nokta gözüküyor.
Eskiden bu yöntem statik sitelerde javascript destekli dinamik sitelerde back-end kodları aracılığı ile yapılıyordu. Yazının karakter sayısını alıp maksimum değerden çok ise üç nokta eklenip yazının o kısma kadar olan bölümü kesilip ekrana yazdırılıyordu. Bu yöntem statik web sitelerinde javascript işleminin kasmasına, dinamik yapılarda da sayfanın geç yüklenmesine neden olmaktaydı. Şimdi ise css ile bu işlemi çok basit ve sorunsuz bir şekilde gerçekleştirebiliyoruz.
Gelelim yapmamız gerekelere;
Burada bir dip not vereyim, sabit bir yükseklik vereceğiniz alan için en iyi yükseklik ölçüsünü almak için tarayıcı üzerinde denemeler yaparak doğru ölçüyü elde edin. Her fontun kapladığı alan aynı olmadığı için verdiğim yükseklik ve satır yüksekliği bilgilerinde uyumsuzluklar meydana gelebilir.
Css Kodlarımız;
Tek Satır;
.cssteksatir {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
overflow:hidden;
}
İki satır;
.cssikisatir {
overflow: hidden;
line-height: 20px;
display: -webkit-box;
width: 100%;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
height: 40px;
}
Üç satır;
.cssucsatir {
overflow: hidden;
line-height: 20px;
display: -webkit-box;
width: 100%;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
height: 58px;
}
Burada dikkat edilmesi gereken satır sayısı değeridir. İki ve daha fazla satır için yükseklik değeri zorunludur. Yükseklik değeri vermediğiniz takdirde yazıların tamamı gözükecektir. Tabi örneğin 3 satırlık bir yazı yazdığımızı varsayarsak, 3. satırın sonunda üç nokta gözükür.
Keyifli kodlamalar dilerim.
Yorumlar
Ortalama
Yazı gerçekten çok iyi
Makale çok güzel ve son derece yararlı olmuş, teşekkürler.