Desbordamiento hacia la izquierda en lugar de hacia la derecha

Tengo un div con overflow:hidden, dentro del cual muestro un número de teléfono mientras 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 hacia 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 si el div mostrara el extremo derecho de su contenido y se desbordara hacia el lado izquierdo. ¿Cómo puedo crear este efecto?

¿Ha intentado utilizar lo siguiente?

direction: rtl;

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

Tuve el mismo problema y lo resolví usando dos divs. El div exterior hace el recorte a la izquierda y el div interior hace el flotante 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 poner cualquier contenido dentro del div interno y desbordarlo a la izquierda.

Puede hacerlo float:righty se desbordará hacia la izquierda, pero en mi caso necesito centrar el div si la ventana es más grande que el elemento, pero se desbordará hacia la izquierda si la ventana es más pequeña. ¿Alguna idea sobre eso?

Intenté jugar, direction:rtlpero eso no parece cambiar el desbordamiento de los elementos del bloque.

Creo que la única respuesta es hacerlo flotar correctamente, con un div a la derecha que también flota a la derecha, luego establecer el ancho del div a la derecha en la mitad del espacio restante de la ventana con jquery.

fácil de hacer, <span>los números y la posición del intervalo absoluto a la derecha dentro de un 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

Funcionó como por arte de magia:

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

Se modificó el marcado HTML y se agregó algo de javascript a la solución jsFiddle de WebWanderer.

https://jsfiddle.net/urulai/bfzqgreo/3/

HTML:

<div id="outer-div">

    <p>ipsum dolor amet bacon venison porchetta spare ribs, tongue turducken alcatra doner leberkas t-bone rump ball tip hamburger drumstick. Shoulder strip steak ribeye, kielbasa fatback pig kevin drumstick biltong pork short loin rump. Biltong doner ribeye, alcatra landjaeger tenderloin drumstick t-bone pastrami andouille. Sirloin spare ribs fatback, bresaola strip steak alcatra landjaeger kielbasa cupim doner. </p>

</div>

CSS:

#outer-div {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
  border:1px solid black;
}

JS:

let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;