Overflow to left instead of right

I have a div with overflow:hidden, inside which I show a phone number as the user types it. The text inside the div is aligned to right and incoming characters are added to right as the text grows to left.

But once the text is big enough not to fit in the div, last characters of the number is automatically cropped and the user cannot see the new characters she types.

What I want to do is crop the left characters, like the div is showing the rightmost of its content and overflowing to the left side. How can I create this effect?

From stackoverflow

• Have you tried using the following:

  direction: rtl;
  

  For more information see http://www.w3schools.com/Css/pr_text_direction.asp

• I'm trying to accomplish the same thing but with text.

  Is it possible to overflow to the left without changing the direction of the text? The direction property puts the ending punctuation to the left which is not what I want.

  I have a sidebar in my layout and the text is aligned on the right, I'd like it to overflow to the left (while using nowrap)

  <div style="width:150px;white-space:nowrap;direction:rtl;">
      <span>Hello World!</span>
      <span>Sometext</span>
      <span>Some other text.</span>
  </div>
  

  outputs to:

      !Hello World
          Sometext
  .Some other text
  

  Note that I use classes, but for the sake of the example I used inline styling.

  Thanks

• easily done, '<-span->' the numbers and position the span absolute to the right inside an element with overflow hidden.

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

  :)

  rgrds jake