HTML elemanından belirli bir satır sayısını geçtikten sonra arta kalan yazıyı gizleyeceğiz.
Bunun için ben önceden şöyle bir yöntem kullanıyordum:
Diyelim ki bizim body elemanımızın font-size değeri 16px olsun. Aynı şekilde line-height değerimizin de 1.5 olduğunu düşünelim.
Bu durumda biz p elementimizin height özelliğine font-size değerimiz ile line-height değerimizden çıkan sonucu göstermek istediğimiz satır sayısı ile çarptığımız zaman çıkan sonucu verdiğimizde tam olarak göstermek istediğimiz satır sayısı kadar yüksekliğe sahip olacak. overflow özelliğine de hidden değerini verdiğimiz zaman arta kalan satırları gizleyecektir. Demek istediğim:
body {
font-size: 16px;
line-height: 1.5;
}
.box {
p {
height: calc(2 * calc(16px * 1.5));
overflow: hidden;
}
}
Bu şekilde kodumuzu yazmadan önce bakalım:
Kodumuzu yazdıktan sonra olan sonuca bakalım:
Tabi bu yöntem aslında çok kaba bir yöntem. Dedim ya önceden bu şekilde yapıyordum diye. Şimdi daha sağlıklı bir kullanımı olan yönteme bakalım.
Bu yöntemde de ben şu kodları yazıyorum:
.box {
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
Burada artık bizim hesap yapmamıza hiç gerek yok. -webkit-line-clamp özelliğine göstermek istediğimiz satır sayısını yazıyoruz. -webkit-box-orient özelliğine de vertical değerini veriyoruz. Bunların çalışması için de display özelliğine -webkit-box vermemiz gerekiyor. Son olarak taşma özelliğimize yani overflow‘a da hidden verdiğimiz zaman çok daha güzel bir sonuç almış oluyoruz:
Bu iki yöntemi karşılaştırmak istersek her ikisinde de 2 satır göstereceğimizi varsayarak; birinci yöntemde içerik olmasa da 1 satır olsa da her zaman 2 satırlık yüksekliğe sahip oluyor, ikinci yöntemde ise biz 2 satır göstermek istiyoruz diye belirttiğimizde içerik 1 satır olursa yine 1 satır yüksekliğinde yer kaplıyor ve gizlenen kısım yerine ... yazarak aslıdan o yazının devamının olduğunu belirtiyor.