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?
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
@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
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