Necesito un desbordamiento para truncar desde la izquierda, con elipses

En pocas palabras, tengo un campo donde los dígitos más a la derecha son los más significativos. (Naturalmente, este campo proviene de los sistemas de nuestros afiliados, según sus claves principales, por lo que los dígitos más a la izquierda solo cambian una vez por época)Necesito un desbordamiento para truncar desde la izquierda, con elipses

Todo el mundo sabe que CSS proporciona un truncamiento CORRECTO con "text-overflow: ellipsis;" . ¿Cómo (sin agregar código al servidor para preparar ese campo mediante cirugía de cadena) truncamos el campo en la IZQUIERDA y ponemos las elipses "..." en la IZQUIERDA?

(CSS 3 está bien.)

Fuente

2012-10-06 Phlip

Relacionados: http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side –

He añadido un violín para mostrar el problema y proponer una solución muy hackish: http: // jsfiddle. net/ryanwheale/2cyVX/ –

este tipo de caso borde es la razón por la cual los desarrolladores de Firefox se negaron a implementar puntos suspensivos hasta FFv7, a pesar de tener tantas críticas por ello. Lo implementaron al final, pero la especificación tiene muchos agujeros en los bordes. Si está haciendo algo mucho más que lo básico ... al final de un cuadro, encontrará problemas con él. – Spudley

Trate de usar este truco:

HTML

<p class="ellipsis">ert3452654546</p>

CSS

.ellipsis 
    { 
     overflow:hidden; 
     width: 60px; 
     direction:rtl; 
     margin-left:15px; 
     white-space: nowrap; 
    } 

.ellipsis:after{position:absolute;left:0px; content:"...";}

FIDDLE

Fuente

2012-10-06 17:54:55 khomyakoshka

+1 - esta es la única solución que he visto que funcionó correctamente en Chrome. ¡Buen trabajo! –

El elemento padre del elemento ': after' necesita tener' position: relative' or 'absolute'. O bien obtienes esto: http://jsfiddle.net/ekLpfy08/ –

No hay necesidad de pseudo-elemento 'after'. Puede agregar 'text-overflow: ellipsis' en lugar de' :: after'. Los puntos aparecerán a la izquierda, porque la 'dirección' es' rtl'. – kakaja

no puedo probarlo ahora, pero estoy bastante seguro de que la adición de

direction: rtl;

hará el resultado esperado.

Fuente

2012-10-06 16:58:36 Tchoupi

De hecho, pone los puntos suspensivos a la izquierda, sin embargo, parece haber un error en Chrome donde los puntos suspensivos simplemente se anteponen al texto, pero aún se ve el borde izquierdo (principio) del texto en lugar del final. Ver violín: http://jsfiddle.net/ryanwheale/2cyVX/ –

@RyanWheale, ahora sucede en IE ... Pero no en Chrome más AFAIK –

Gracias, funciona dentro de un '' en un '

': http://i.imgur.com/aPrBJmc.png – Dorian

Puede utilizar una clase CSS para tener este tipo de comportamiento como:

.responsive-text { 
    display: inline-block; 
    vertical-align: middle; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    direction: rtl; 
    width: 100%; 
}

es suficiente con definir el tamaño del contenedor de este texto y cada vez que el texto en el interior no rellena solo una línea, va a truncar el texto y agrega ... al principio.

Fuente

2018-02-14 13:21:49 Yoan

Cuestiones relacionadas

Necesito un desbordamiento para truncar desde la izquierda, con elipses

Respuesta

Cuestiones relacionadas