2013-07-24 29 views
11

Ho adattato jQuery UI MultiSelect Widget in modo che il testo mostri tutte le etichette selezionate, ma se troppi elementi sono selezionati per la visualizzazione, il testo verrà ritagliato ed ellisso. L'ho fatto così:Ellissi CSS con elementi in linea?

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

Le uniche cose che non mi piacciono in questa soluzione è che ho dovuto impostare display: block all'elemento (arco). Senza di esso, il parametro width è stato ignorato e l'estensione si è estesa alle dimensioni del testo.

È possibile che i puntini di sospensione funzionino con elementi in linea (senza modificare display in block)? Se sì, come arrivarci?

risposta

10

c'è un'opzione display che funziona come una casa a metà strada tra inline e block, progettato proprio per questo tipo di situazione ...

si chiama

display:inline-block; 

Utilizza questo invece di block e il tuo elemento continuerà a scorrere nel tuo contenuto come se fosse inline, ma fungerà da block per i suoi contenuti, il che significa che i tuoi puntini di sospensione dovrebbero funzionare.

+0

funzionerà, ma non è supportato nei browser di livello inferiore. oggigiorno non è un grosso problema, dato che l'attuale quota di browser che la supportano correttamente è molto più alta ... http://caniuse.com/inline-block credo sia il momento di iniziare a usarlo: P – xandercoded

+0

@Xander - Che i browser a cui stavi pensando? Quanto indietro vuoi andare? Firefox v3.0 lo supporta (anche FF2 con un prefisso). E nel mondo di IE, anche IE6 supporta 'inline-block'. Ha bug in IE6/7, ma è lì. Se hai bisogno di supportare IE6/7, è bene conoscere i bug, ma non dovrebbe smettere di usarlo. – Spudley

+2

A proposito, i puntini di sospensione indicano solo "display: inline-block;" se c'è una larghezza specificata pure. Il mio problema era che non avevo una "larghezza" o una "larghezza massima". – Tyler

Problemi correlati