Transbordar para a esquerda em vez da direita


105

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?

transbordando número de telefone para a esquerda


Para quem está tentando fazer o texto correr de cima para baixo e alinhado à direita, confira stackoverflow.com/a/53576895/4418836
Jordan

Respostas:


149

Você já tentou usar o seguinte:

direction: rtl;

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


22
Aviso: isso não funciona para um visor de calculadora com caracteres especiais como / e *.
Máx.

11
Também não funciona para localidades com formatação de número diferente dos EUA, como "" para separador de milhar. Esta não é a solução correta
Robert Slaney

12
Esta propriedade não se destina ao alinhamento e também alterará a ordem das palavras internas. Fe 14:00–15:00será usado 15:00–14:00no Firefox.
Andy

3
Isso também não inverte a ordem dos personagens?
evolutionxbox

7
Sim, você precisa envolver os elementos contidos em outro elemento com direction: ltrregra para reverter o efeito.
Óscar Gómez Alcañiz

56

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.


8
Eu queria ver isso funcionando, então fiz este JSFiddle para testá-lo e funciona muito bem! Ótima resposta! Obrigado!
WebWanderer

4
Esta é uma ótima resposta, pois o direction rtl tem todos os tipos de efeitos colaterais. Se você quiser garantir que o div interno seja alinhado à esquerda e apenas truncado à esquerda se o div for excedido, defina .outer-div como max-width: 100% e exiba: inline-block. Veja aqui
Lucas

2
Obrigado pelo JSFiddle WebWanderer. Eu o atualizei para usar de overflow: visibleforma que o conteúdo possa vazar do lado esquerdo .
joeytwiddle de

8

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.


Aceita. Flutue o pai para a direita e certifique-se de que nenhum container intermediário tenha overflow definido como oculto.
Lisa

8

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


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>

0

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;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.