Mi objetivo es crear un elemento con desbordamiento oculto y puntos suspensivos, excepto que quiero ocultar los caracteres del lado IZQUIERDO y los puntos suspensivos también para estar a la izquierda. Esto funciona para la mayoría de los navegadores:Varios problemas de compatibilidad del navegador con elipsis de desbordamiento de texto en el lado izquierdo usando RTL
CSS:
#mydiv {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
direction:rtl;
}
HTML:
<div id="mydiv">foobar foobar foobar</div>
Lo cual, cuando #mydiv es más estrecha que su contenido, debe salir como algo parecido a:
... obar foobar
Sin embargo, por lo que puedo decir (y advertencia justa a cualquier otra persona que intente esto, ya que he visto la solución direction:rtl en varios otros lugares), el único navegador importante que hace esto correctamente parece ser Firefox. Safari y Google Chrome tanto colocar los puntos suspensivos a la izquierda del texto, pero luego truncar a la derecha de todos modos, así:
... foobar foob
IE9 y Opera consiguen francamente confusa . IE trunca a la derecha Y hace que el texto se superponga a las elipsis. Opera, con mucho, el más creativo, hará que el desbordamiento sea visible en palabras individuales durante un tiempo (a medida que el elemento se estrecha), y luego comenzará a truncar la palabra más a la izquierda, pero desde la derecha. Tampoco puede representar la elipsis y, en un experimento que hice, incluso movió un carácter ™ completamente hacia la izquierda. De Verdad. Así que "foobar foobar foobar ™" se convierte en esto:
™ foob foobar
Como una nota adicional, una (muy molesto) posible opción para los navegadores WebKit podría ser el establecimiento de -webkit-rtl-ordering:visual, que trunca a la izquierda sino que también hace que literalmente los caracteres en orden inverso:
... boofraboof
Por lo tanto, mediante el navegador o algún tipo de característica oculta, se podría establecer teóricamente esa propiedad e invertir el texto del elemento dinámicamente.
¿Existe una solución simple para varios navegadores, o incluso una basada en JS compleja?
He abierto un error en este tema http://crbug.com/155836. Tenga en cuenta que este problema solo parece ocurrir cuando se usa una lng langue. Chrome tiene los lenguajes rtl correctos. – Mbrevda