Diversi problemi di compatibilità del browser con i puntini di trascinamento del testo sul lato sinistro utilizzando RTL

Question

Il mio obiettivo è creare un elemento con overflow nascosto e puntini di sospensione, tranne che voglio che i caratteri sul lato SINISTRO siano nascosti e anche i puntini di sospensione sii sulla sinistra Questo funziona per la maggior parte dei browser:

CSS:

#mydiv { 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    direction:rtl; 
} 

HTML:

<div id="mydiv">foobar foobar foobar</div> 

che, una volta #mydiv è più stretta rispetto ai suoi contenuti, dovrebbe uscire come qualcosa di simile:

... obar foobar

Tuttavia, da quello che posso dire (e inequivocabile a chiunque lo voglia provare, visto che ho visto la soluzione direction:rtl in molti altri posti), l'unico SOLO browser che fa correttamente questo sembra essere Firefox. Safari e Google Chrome saranno entrambi mettere i puntini di sospensione alla sinistra del testo, ma poi troncare a destra in ogni caso, in questo modo:

... pippo foob

IE9 e Opera ottengono addirittura confuso . IE tronca a destra E rende il testo sovrapposto ai puntini di sospensione. L'opera, di gran lunga la più creativa, renderà l'overflow visibile su singole parole per un po '(mentre l'elemento si restringe, cioè), quindi inizierà a troncare la parola più a sinistra, ma da destra. Inoltre non riesce a visualizzare i puntini di sospensione e, in un esperimento che ho fatto, ha persino spostato un carattere ™ completamente a sinistra. Veramente. Quindi, "foobar foobar foobar ™" diventa questo:

™ foob foobar

Come nota aggiuntiva, uno (estremamente fastidioso) opzione potenziale per i browser WebKit potrebbe essere quella di impostare -webkit-rtl-ordering:visual che tronca a sinistra ma anche rende letteralmente i personaggi in ordine inverso:

... boofraboof

Così, con il browser o con qualche tipo di oscuro feature-sniffing, si potrebbe teoricamente impostare quella proprietà e invertire dinamicamente il testo dell'elemento.

Esiste una soluzione alternativa per il cross-browser o anche una complessa basata su JS?

Answer 1

Esistono soluzioni basate su JS/Jquery per il tuo problema. L'unica avvertenza è che sono più costosi. Se non stai apportando una serie di modifiche alla tua pagina, le seguenti soluzioni dovrebbero funzionare bene.

Dotdotdot: http://dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

Edit: Giusto per essere chiari, sto vedendo gli stessi problemi che avete menzionato.