2013-07-24 24 views
11

jQuery UI MultiSelect Widget'ı, metnin tüm seçili etiketleri göstermesini sağlayacak şekilde uyarladım, ancak görüntülenecek çok fazla öğe seçiliyse, metin kırpılacak ve kaldırılacaktı. Ben öyle yaptık: O çözümde sevmiyorumSatır içi elemanlı CSS elipsi?

.ui-multiselect .selected-text { 
    display: block; 
    max-width: 190px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

tek şey ben elemanın (yayılma) için display: block ayarlamak zorunda olmasıdır. Bu olmadan, genişlik parametresi göz ardı edildi ve aralık metin boyutuna genişletildi.

Üç noktadan satır içi elemanlarla çalışmak (display - block arası) almak mümkün mü? Eğer öyleyse, bunu nasıl başarabilirim?

cevap

10

denir

inline ve durumun tam olarak bu tür tasarlanmış block arasında bir yarı yolda evine olarak çalışan bir display seçenek var ...

display:inline-block; 

Bunu block yerine kullanın ve öğeniz, içeriğinizde hala inline gibi akıyor, ancak block olarak davranacak İçeriği için, elipsinizin çalışması gerektiği anlamına gelir.

+0

, ancak aşağı düzey tarayıcılarda desteklenmiyor. Şu anda bir sorun çok değil, doğru olarak destekleyen tarayıcıların mevcut payı çok daha yüksek olduğu gibi ... http://caniuse.com/inline-block sanırım bunu kullanmaya başlama zamanı: P – xandercoded

+0

@Xander - Hangi tarayıcıları mı düşünüyordun? Ne kadar geriye gitmek istersin? Firefox v3.0 onu destekler (önek ile FF2 bile). Ve IE dünyasında, IE6 bile inline-block'ı destekliyor. IE6/7'de hatalar var, ama var. IE6/7'yi desteklemeniz gerekiyorsa, hatalar hakkında bilgi sahibi olmak iyidir, ancak bunu kullanmamanız gerekir. – Spudley

+2

Bu arada, elips sadece "display: inline-block;" eğer belirlenmiş bir genişlik varsa. Benim sorunum, "width" veya "max-width" olmadığımdı. – Tyler

İlgili konular