Overflow para a esquerda em vez da direita

Question

Eu tenho uma div com overflow:hidden, dentro do qual eu mostrar um número de telefone como o usuário digita-lo. O texto dentro do div está alinhado com personagens certas e recebidas são adicionados para a direita como o texto cresce para a esquerda.

Mas uma vez que o texto é grande o suficiente para não caber no div, últimos caracteres do número é automaticamente cortado eo usuário não pode ver os novos personagens ela digita.

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

Answer 1

Você já tentou usando o seguinte:

direction: rtl;

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

Answer 2

Eu tive o mesmo problema e resolveu-lo usando dois divs. O div externa faz o recorte à esquerda e o div interna faz o flutuante para a 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 da div interior e estouro-lo do lado esquerdo.

Answer 3

Você pode fazer float:right e ele irá transbordar para a esquerda, mas no meu caso eu preciso centralizar o div se a janela é maior do que o elemento, mas estouro à esquerda se a janela for menor. Quaisquer pensamentos sobre isso?

Eu tentei brincar com direction:rtl mas que não aparece para mudar o excesso de elementos de bloco.

Eu acho que a única resposta é a flutuar direito, com uma div à direita dele que também é flutuou direita, em seguida, definir a largura da div para a direita para metade do espaço janela restante com jQuery.

Answer 4

feito facilmente, <span> os números e posição o tempo absoluto para a direita dentro de um elemento com estouro 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 5

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>

Answer 6

Modificado HTML marcação e acrescentou alguns javascript para solução 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;