Desbordamiento a la izquierda en lugar de a la derecha

Question

Tengo un div con overflow:hidden, dentro del cual muestro un número de teléfono a medida que el usuario lo escribe. El texto dentro del div se alinea a la derecha y los caracteres entrantes se agregan a la derecha a medida que el texto crece a la izquierda.

Pero una vez que el texto es lo suficientemente grande como para no caber en el div, los últimos caracteres del número se recortan automáticamente y el usuario no puede ver los nuevos caracteres que escribe.

Lo que quiero hacer es recortar los caracteres de la izquierda, como que el div muestra el extremo derecho de su contenido y se desborda hacia el lado izquierdo. ¿Cómo puedo crear este efecto?

Answer 1

¿Ha intentado utilizar el siguiente:

direction: rtl; 

Para obtener más información, véase
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

fácil de hacer, <span> el número y la posición de la duración absoluta a la derecha dentro de una elemento con desbordamiento oculto.

<div style="width: 65px; height: 20px; 
      overflow: hidden; position: relative; background: #66FF66;"> 
    <span style="position: absolute; right: 0;">05451234567</span> 
</div> 

:)

rgrds Jake

Answer 3

Usted puede hacer float:right y va a desbordar por la izquierda, pero en mi caso tengo que centrar la div si la ventana es más grande que el elemento , pero se desborda hacia la izquierda si la ventana es más pequeña. ¿Alguna idea sobre eso?

He intentado jugar con direction:rtl pero eso no parece cambiar el desbordamiento de los elementos del bloque.

Creo que la única respuesta es flotar bien, con un div a la derecha del mismo que también está flotado a la derecha, luego establecer el ancho del div a la derecha a la mitad del espacio de la ventana restante con jquery.

Answer 4

Tuve el mismo problema y lo resolví usando dos divs. El div externo hace el recorte a la izquierda y el div interno lo hace a la derecha.

.outer-div { 
    width:70%; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:right; 
    overflow:hidden; 
    white-space: nowrap; 
} 

.inner-div { 
    float:right; 
} 

: 

<div class="outer-div"> 
    <div class="inner-div">  
    <p>A very long line that should be trimmed on the left</p> 
    </div> 
</div> 

Debería poder colocar cualquier contenido dentro del div interno y desbordarlo a la izquierda.

Answer 5

Esto funcionó como un encanto:

<div style="direction: rtl;"> 
    <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span> 
</div>