zingat.com‘un satılık ve kiralık arama sonuç sayfalarını kodlarken her bir kutunun belirli yüksekliği olduğu için gelen başlığın harita açıldığında altında kalan metinlerin üzerine binmesi sorununu haletmek için Murat‘la bu metni 2 satır ile sınırlandırmalıyız dedik. En güzel çözüm CSS ile webkit-line-clamp yardımı ile bunu yapmaktı. Acaba bu özelliğin desteği ne kadar diye biraz bakınca %92’ye yakın destek bizi bu kodu kullanmaya itti.

Daha önce uzun metinleri tek satırda sabitlemek için aşağıdaki yöntemi kullanıyordum.

Bu iş için bir mixin yazmak güzel oluyor.

.ucnokta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

yazıp, sonra kullanmak istediğimiz yere

.baslik {
.ucnokta;
}

yazarak işi basitleştirmiş oluyoruz.

Peki bu işi iki veya daha fazla satır için yapan bir CSS kodu yok mu? Var aşağıda :)

Kod çok basit.

-webkit-line-clamp: 3 tanımı ile kaç satırın görünmesi bu satır ile tanımlıyoruz. Yukarıdaki gibi bu tanımı bir mixin yapıp istediğimiz yerde kullanabiliriz.

Mobilde ve dar alanlarda güzel iş görüyor.

// Clamps a block of text to a certain number of lines,
// followed by an ellipsis in Webkit and Blink based browsers
// Reference: http://dropshado.ws/post/1015351370/webkit-line-clamp
@mixin text-clamp($lines: 2, $line-height: false) {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;

// Fallback for non-Webkit browsers
// (won't show `…` at the end of the block)
@if $line-height {
max-height: $line-height * $lines * 1px;
}
}

Can I Use css-line-clamp? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

Kaynaklar

Sublime Text Linting

Kod yazarken mümkün olduğu kadar hatasız kod üretmek isteriz. Ancak bu işin kaçınılmaz sonucudur hatalar. `Hatasız kod olmaz.` Amaç en az...… Devamını oku

Elementlere Stilini Atamak ve Okumak (jquery - js)

08 January 2018 tarihinde yayınlandı.

Sublime Text Yerimi Özelliği (Bookmarks)

03 January 2018 tarihinde yayınlandı.