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

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ş: