Überlauf nach links statt nach rechts

Ich habe ein div mit overflow:hidden, in dem ich eine Telefonnummer zeige, während der Benutzer sie eingibt. Der Text innerhalb des div wird nach rechts ausgerichtet und eingehende Zeichen werden nach rechts hinzugefügt, wenn der Text nach links wächst.

Sobald der Text jedoch groß genug ist, um nicht in das div zu passen, werden die letzten Zeichen der Zahl automatisch zugeschnitten und der Benutzer kann die neuen Zeichen, die er eingibt, nicht sehen.

Was ich tun möchte, ist, die linken Zeichen zuzuschneiden, so wie das div den Inhalt ganz rechts anzeigt und auf der linken Seite überläuft. Wie kann ich diesen Effekt erzeugen?

Haben Sie versucht, Folgendes zu verwenden:

direction: rtl;

Weitere Informationen finden Sie unter
http://www.w3schools.com/cssref/pr_text_direction.asp

Ich hatte das gleiche Problem und löste es mit zwei Divs. Das äußere Div schneidet links und das innere Div schwebt nach rechts.

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

Sie sollten in der Lage sein, Inhalte in das innere Div zu legen und links überzulaufen.

Sie können dies tun float:rightund es wird nach links überlaufen, aber in meinem Fall muss ich das div zentrieren, wenn das Fenster größer als das Element ist, aber nach links überlaufen, wenn das Fenster kleiner ist. Irgendwelche Gedanken dazu?

Ich habe versucht, damit herumzuspielen, direction:rtlaber das scheint den Überlauf von Blockelementen nicht zu ändern.

Ich denke, die einzige Antwort ist, es nach rechts zu schweben, mit einem Div rechts davon, das auch nach rechts schwebt, und dann die Breite des Div nach rechts auf die Hälfte des verbleibenden Fensterraums mit jquery zu setzen.

leicht gemacht, <span>die Zahlen und positionieren die Spanne absolut rechts in einem Element mit Überlauf versteckt.

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

:) :)

rgrds jake

Das hat wie ein Zauber gewirkt:

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

Das HTML-Markup wurde geändert und der jsFiddle-Lösung von WebWanderer wurde Javascript hinzugefügt.

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;