#

CSS ile Yazı Uzunluğunu Sınırlamak (Ellipsis)

Hazırladığım her projede muhakkak karşılaştığım sorunlardan biridir uzun ve taşan başlıklar, yazılar. CSS’in şahane özelliklerinden biri olan text-overflow:ellipsis ile bu soruna çare buluyoruz.

Aslında her zaman div’lerin içerisindeki yazıları overflow:hidden; ile kesebiliyor olsakta biçimsiz, suni bir görüntü oluşturuyordu. Bazı karakterler kesilmiş gözüküyordu. Artık bu gibi durumlarda kullanımı en kolay ve performansı en yüksek yöntem olan “ellipsis” değeriyle yazıyı sınırlandırabiliyor ve üç nokta ile estetik hale sokabiliyoruz.

Yukarıda text-overflow değerlerini örneklerle sıraladım. Altın kuralımız DIV’e genişlik(width) vermek.(Aşağıda genişlik vermeden kullanımınıda anlattım) Ben genişliği 100px olarak aldım. Kullandığımız white-space: nowrap; kodu div içerisinde ki yazıyı tek satırla sınırlandırıyor. overflow:hidden; ile taşan yazıyı gizliyoruz.

Açıkcası beni en çok etkileyen masaüstünde yazıyı kesmesi değil, mobilde kullanımı oldu. Responsive tasarımlarda inanılmaz işe yarıyor. Genişlik 100% verildiğinde küçülen ekranınızda yazıyı alt satıra değilde, küçüldükce üç nokta ile kesmeyi sağlıyoruz.

(ekranı daraltın)

Diğer yandan çoğu zaman kısaltmalarımız tek satırla sınırlı kalmıyor. Çoklu satırlarda nasıl kullanacağımızı aşağıda anlatmaya çalıştım.

-webkit-line-clamp: 3; ile kaç satırla sınırlayacağımızı ayarlayabiliriz. Şöyle bi eksi yanı var ki ben Firefox kullanıyorum, maalesef ilk yol ile ellipsis çoklu satır için işe yaramadı.

İkinci yolla ise ellipsis kullanmadan yazı sınırlamayı göstermeye çalıştım. Mantığını kısaca anlatmam gerekirse absolute(bağımsız) değeri verilen div’i yazının sağ, altına yerleştirerek yazıyı bitiriyoruz. Soldan transparan başlayarak sağa doğru beyazlaşan bir arkaplan verdim. Görüntüsünü bir nebze olsun zenginleştirdi, güzelleştirdi. Tabii ilk yöntem ile kullanmanızda fayda var.

Tarayıcı desteği ise şu şekilde;

Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
text-overflow
4.0
6.0
7.0
3.1
11.0 / 9.0 -o-
Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
line-clamp
36 -webkit-
Desteklemiyor
Desteklemiyor
8 -webkit-
41 -webkit-

Etiketler

Paylaş

Yorumlar