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
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:hiddenwhite-space:nowrapayarlanmış 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-blockdisplay:blockeleman (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-widthwidthbir sabit olmak için yola çıktı. float:leftfloat:righteleman (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:

Daha hatları metin taşma üç nokta ile ...
metin taşması: üç nokta çalışmıyor...
metin taşması:Firefox 4'te üç nokta? (...
Neden taşma:gizli <td> çalışmıyo...
Odak jQuery Safari çalışmıyor kullanar...