SORU
22 Temmuz 2013, PAZARTESİ


CSS metin taşma: üç nokta; çalışmıyor?

Bu basit CSS çalışmıyor neden hiçbir fikrim yok...

CSS:

#User_Apps_Content .DLD_App a {
    position:relative;
    height:18px;
    width:140px;
    margin:0 5px 0 5px; padding:0;
    font:bold 15px/18px Arial;
    text-align:center;
    text-decoration:none;
    color:#FFFFFF;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

HTML:

<div class="DLD_App" data-appname="">
    <img src=""></img>
    <h1></h1>
    <a href=""></a>
</div>

CEVAP
22 Temmuz 2013, PAZARTESİ


text-overflow:ellipsis; sadece aşağıdakiler geçerli olduğunda çalışır:

  • Elemanın genişliği px (piksel) kısıtlı olması gerekir. % genişliği (yüzde olarak) çalışmıyor.
  • Eleman overflow:hidden white-space:nowrap ayarlanmış olması gerekir.

Burada sorunlar yaşıyorsanız nedeni a eleman width sınırlı değil çünkü. Öğe display:inline (ıe varsayılan) olarak bunu göz ardı çünkü width bir ayar, ama var, ve başka bir şey de genişliği kısıtlayıcı.

Aşağıdakilerden birini yaparak bunu düzeltebilirsin:

  • display:inline-block display:block eleman (muhtemelen eski, ama düzen sizin ihtiyaçlarınıza göre değişir) ayarlayın.
  • Konteyner öğelerinden biri 15 ** ve o eleman ya max-width width bir sabit olmak için yola çıktı.
  • float:left float:right eleman (muhtemelen eski, ama yine de aynı etkiyi üç nokta ile ilgili olarak olmalıdır).

Ben göstermez display:inline-block beri bu olacak asgari colateral darbe düzeni; bu işleri çok seviyor display:inline kullanarak kendi şu anda bildiğim kadarıyla düzen söz konusu, ama çekinmeyin deney ile diğer noktaları da; denedim verecek kadar bilgi mümkün olduğunca anlamak için bunları nasıl interract birlikte; büyük bir kısmı anlama CSS hakkında anlayış nasıl çeşitli stilleri ve birlikte çalışırlar.

Bu yardımcı olur umarım.

display:inline-block ile kodunuzu, Here's a jsfiddle, nasıl olduğunu göstermek için eklendi.

Yararlı kaynaklar:

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Adam Outler

    Adam Outler

    19 EKİM 2006
  • gamingbits

    gamingbits

    2 Mayıs 2006
  • martin shervington

    martin sherv

    7 EKİM 2011