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.

“CSS yazıya satır limiti uygulamak” üzerine bir yorum

Burcu Gümüş için bir cevap yazın Cevabı iptal et

K & S Ajans

Sunucu optimizasyonu, WordPress kurulumu, Kullanıcı odaklı tasarımlar, SEO çalışması, E-Posta ağı gibi işlemlerin tamamı için eğitim paketlerimiz mevcuttur.

KVKK: birblog.com kapsamında kişisel verileriniz: içeriklerimize yorum yapmanız durumunda, IP ve E-posta adresiniz 3. kişilerin erişimine kapalı kalır, kullanıcı adı ve yorumunuz ilgili içeriğin sayfasında görüntülenir. Ödeme alanı: kullandığımız ödeme servisi hiçbir şekilde kişisel verilerinizi kullanamaz. İletişim formu: İletişim formuna girdiğiniz veriler işleme tabii değildir. Abonelik: abone olduğunuz E-Posta adresi sizin onayınız sonucunda yeni içeriklerin bildirimine açılır.

Kerem SARI

Fındıklı Mah. Serin Sok. No:155/15 MALTEPE / İSTANBUL Posta Kodu: 34854

Whatsapp

0850 308 93 34

0532 744 2058

info@ksajans.com

Küçükyalı Vergi Dairesi

Vergi No: 7460853530

K&S AJANS, Bilgi Teknolojileri ve İletişim Kurumu (BTK) lisansı ile ticari amaçla faaliyet gösteren yasal yer sağlayıcı ve hosting firmasıdır.