Transbordar para a esquerda em vez da direita

Eu tenho um div com overflow:hidden, dentro do qual mostro um número de telefone conforme o usuário o digita. O texto dentro do div é alinhado à direita e os caracteres recebidos são adicionados à direita conforme o texto cresce para a esquerda.

Mas, uma vez que o texto é grande o suficiente para não caber no div, os últimos caracteres do número são cortados automaticamente e o usuário não pode ver os novos caracteres que digitar.

O que eu quero fazer é cortar os caracteres da esquerda, como o div está mostrando o conteúdo mais à direita e transbordando para o lado esquerdo. Como posso criar esse efeito?

Você já tentou usar o seguinte:

direction: rtl;

Para obter mais informações, consulte
http://www.w3schools.com/cssref/pr_text_direction.asp

Eu tive o mesmo problema e resolvi usando dois divs. O div externo faz o recorte à esquerda e o div interno flutua à direita.

.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>

Você deve ser capaz de colocar qualquer conteúdo dentro do div interno e estourá-lo à esquerda.

Você pode fazer float:rightisso e ele irá estourar para a esquerda, mas no meu caso preciso centralizar o div se a janela for maior do que o elemento, mas estourará para a esquerda se a janela for menor. Alguma opinião sobre isso?

Tentei brincar com direction:rtlisso, mas isso não parece alterar o estouro de elementos de bloco.

Acho que a única resposta é flutuar para a direita, com um div à direita dele que também flutuou para a direita, em seguida, defina a largura da div para a direita na metade do espaço restante da janela com jquery.

feito facilmente, <span>coloque os números e posicione o span absoluto à direita dentro de um elemento com overflow oculto.

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

:)

rgrds jake

Isso funcionou como um encanto:

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

Marcação HTML modificada e adicionado algum javascript à solução jsFiddle do 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;