Css ile Bir Metni Tek Satır Halinde Gösterme

27 12 2012 00:10 tarihinde, Css, Web Tasarım kategorisinde yazıldı. Hiç yorum yapılmadı, 10194 kez okundu

Web tasarım bir sabır ve incelik işidir hiç şüphesiz. Bir süreçtir aynı zamanda. Sürekli yenilik ve ilgi ister her site. Her ne kadar değişikliği sevmesiniz de yeni öğrendiğiniz bir bilgi sizden kullanılmayı ister.

Web tasarım biraz geometriye benziyor. Her öğrenilen bir bilgi bir diğeriyle zincirin halkaları gibi bağlantılı olarak kullanılıyor.

Css bir sitenin makyajı gibidir. Html, php vb fonksiyonel işlevi üstlenirken Css bir sitenizin görünüşü ve ziyaretçiyi en çok etkileyen unsurudur.

Sitenizin genellikle sağ ya da sol sidebar kısmında yer alan listelerde ya da herhangi bir yerinde tek satır halinde göstereceğiniz içeriklere mutlaka ihtiyacınız olmuştur. Metin özetini gösterirken ya da bir başlık listelerken genişliği aştığı durumda alt satıra geçen içerik her zaman görüntüyü bozar. Bu durumda daha hassas kısıtlama için metni karakter bazında sınırlandırabilirsiniz. Ancak Css ile bu iş daha kolaydır.

İçinde bulunduğu sınıfın, div’in ya da bir başka etiketin genişliği kadar bir metni sınırlandırmak için aşağıdaki kodlara ihtiyacınız vardır.

white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;text-overflow:ellipsis;

Sadece

white-space:nowrap;

kullanarak kısıtlamak mümkün ancak kısıtlanan metnin sonuna … (üç nokta) tanımlamak için hepsini kullanmanız gerekir.


Yukarıdaki görselde kod kullanılmış ve kullanılmamış halini görebilirsiniz.

Örnek kullanım:

#element{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;text-overflow:ellipsis;}

Bu konudaki düşüncelerinizi siz de yorum olarak paylaşabilir, aşağıdaki butonlar aracılığıyla daha çok kişiye ulaştırabilirsiniz.

Bunlar da İlginizi Çekebilir
Sponsorlu Bağlantılar
Bu Yazı Hakkında Ne Düşünüyorsunuz?

Sponsorlu Bağlantılar

Son Yorumlar

  • Anonim Ayfer Selci

    Hem twitter hem instagram eklentisini kullanıyorum. Gerçekten çok iyi. Fiyatı da gerçekten çok çok uygun. Elinize sağlık. Facebook için de bir çözüm bekliyoruz.
  • Anonim CAN

    güzel
  • Anonim Misafir

    s.a abi bu kod meselesini bende bir çoğü gibi kullanıyorum malum uzere kodlarada limit getirildi. 1: ana sayfadaki yani akıştaki her twite rt fav kodu 2 : rt yapılan twit sahibini takibe alma kodu (bu kod çok çok önemli çünkü artık cogunluk rt guruplarına yöneldi bu yuzden ana sayfamıza takibinde ol...
  • Anonim Yaşar Semih Özdalcı

    Twitter'da takipçinizi arttırmak için çok basit bir sistem.
  • Anonim Nebi Garcı

    Maalesef bazı hesaplarda bu sorun var hocam. Bildiğim bir yöntem de yok açıkçası.