Débordement vers la gauche au lieu de la droite

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 à mesure que le texte se développe vers la gauche.

Mais une fois que le texte est assez grand pour ne pas tenir dans le div, les derniers caractères du nombre 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 affiche le plus à droite de son contenu et déborde sur le côté gauche. Comment créer cet effet?

Avez-vous essayé d'utiliser les éléments suivants:

direction: rtl;

Pour plus d'informations, consultez
http://www.w3schools.com/cssref/pr_text_direction.asp

J'ai eu le même problème et je l'ai résolu en utilisant deux divs. La division externe effectue le découpage sur la gauche et la division interne fait le flottement vers la droite.

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

Vous devriez pouvoir mettre n'importe quel contenu à l'intérieur de la div interne et le déborder sur la gauche.

Tu peux faire float:right et il débordera vers la gauche, mais dans mon cas, je dois centrer le div si la fenêtre est plus grande que l'élément, mais déborder vers la gauche si la fenêtre est plus petite. Des pensées à ce sujet?

J'ai essayé de jouer avec direction:rtlmais cela ne semble pas changer le débordement d'éléments de bloc.

Je pense que la seule réponse est de le faire flotter à droite, avec un div à droite qui flotte également à droite, puis de définir la largeur du div à droite à la moitié de l'espace de fenêtre restant avec jquery.

facile à faire, <span>les nombres et la position de la travée absolue à droite à l'intérieur d'un élément avec débordement caché.

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

:)

rgrds jake

Cela a fonctionné comme un charme:

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

Modification du balisage HTML et ajout 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;