Gönderen Konu: Css’de geniş yazıyı sınırlandırmak  (Okunma sayısı 443 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Css’de geniş yazıyı sınırlandırmak
« : 17 Mar 2016, 11:25:45 »
Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;

Kod: [Seç]
<div>test et bakalım ne kadar uzun bir yazı..</div>Bunu kısaltmak istediğimde yapmam gereken;

Kod: [Seç]
div {
    width: 60px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
}