Débordement à gauche au lieu de droite

Question

J'ai un div avec overflow:hidden à l'intérieur duquel j'affiche un numéro de téléphone au fur et à mesure que l'utilisateur le tape. Le texte à l'intérieur du div est aligné à droite et les caractères entrants sont ajoutés à droite au fur et à mesure que le texte s'étend vers la gauche.

Mais une fois que le texte est suffisamment grand pour ne pas tenir dans le div, les derniers caractères du numéro sont automatiquement rognés et l'utilisateur ne peut pas voir les nouveaux caractères qu'il tape.

Ce que je veux faire, c'est recadrer les caractères de gauche, comme si le div affichait la partie la plus à droite de son contenu et débordait sur le côté gauche. Comment puis-je créer cet effet ?

Answer 1

Facilement, <span> les chiffres et positionner le span absolu à droite à l'intérieur d'un élément avec 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

Answer 2

Modification du balisage HTML et ajout d'un peu de javascript à la solution 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;