Eski web siteni getir, yenisini götür; %30 indirim!

Anasayfa » Webmaster » CSS yazıya satır limiti uygulamak

CSS yazıya satır limiti uygulamak

Blog yazılarının listelenmesinde oluşan satır kaymalarını, kelime veya karakter limitiyle hizaya sokmam bazı durumlarda mümkün olmuyor. Özet metine karakter limiti uygulasak bile kısa ve uzun başlıklar özet metinin hizasını değiştiriyor. Başlığın bir alt satıra gelmesi, özet metini bir alt satıra kaydırır.

Bütün başlıklar alt satıra düşse bile kelimelerin uzunluğu, kısalığı satır kaymalarına sebep oluyor.

Örnekte görüldüğü gibi:

Karakter limitli
Karakter limitli

Satır limiti uygulamak için aşağıdaki css tanımlarını kullanabilirsiniz.

text-overflow: ellipsis;
-webkit-line-clamp: 6;
letter-spacing: 0;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;

Yeni görünüm hiçbir şekilde satır kaymasına sebep olmayacaktır.

Satır limitli
Satır limitli

Bu işlemdeki tek sorun bu css tanımını iPhone IOS Safari tarayıcısının desteklemiyor olmasıdır. Bu sorunu çözmek için aşağıdaki css tanımını kullanabilirsiniz.

@media only screen and (min-width: 800px) {
.satirlimit{
text-overflow: ellipsis;
-webkit-line-clamp: 6;
letter-spacing: 0;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}}

Bu şekilde tarayıcı 800px ve üstü genişlikte iken satır limiti uygulanır. Bu görüntü kaybına neden olmayacaktır. Telefon genişliğinde satırların görselle hizalanması gerekmiyor.

Yorum yapın

Kredi kartı tek çekim ve taksit seçeneklerindeki kesintiler fiyatlarımıza dahil değildir. Havale yoluyla ödeme yapmak isteyenlere %3 indirim uygulanmaktadır.