Überlauf statt rechts nach links

Question

Ich habe ein div mit overflow:hidden, innerhalb dessen ich eine Telefonnummer während der Benutzer tippt zeigen. Der Text innerhalb des div nach rechts und eingehenden Zeichen ausgerichtet ist, werden zu Recht als der Text nach links wächst.

Aber wenn der Text nicht groß genug ist, in dem div zu passen, letzte Zeichen der Nummer automatisch abgeschnitten werden und der Benutzer kann nicht die neuen Charaktere sie Typen.

Was ich tun möchte, ist Ernte der linken Zeichen, wie die div des am weitesten rechts seinen Inhalt zeigt und auf die linke Seite überläuft. Wie kann ich diesen Effekt erstellen?

Answer 1

Haben Sie versucht, mit dem folgenden:

direction: rtl;

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

Answer 2

Ich hatte das gleiche Problem und lösen es zwei divs verwenden. Der äußere div tut den Ausschnitt auf der linken Seite und die innere div tut nach rechts die schwebende.

.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 alle Inhalte innerhalb des inneren div setzen können, und überfluten sie auf der linken Seite.

Answer 3

Sie können float:right tun und es wird auf der linken Seite überlaufen, aber in meinem Fall muss ich die div zum Zentrum, wenn das Fenster größer als das Element ist, aber Überlauf auf der linken Seite, wenn das Fenster kleiner ist. Irgendwelche Gedanken auf, dass?

Ich habe versucht, das Spiel mit direction:rtl um, aber das scheint nicht den Überlauf von Blockelementen zu ändern.

Ich denke, die einzige Antwort ist, es richtig zu schwimmen, mit einem div rechts von ihm, das ist auch richtig schwimmen, legen Sie dann die Breite des div auf der rechten Seite auf die Hälfte des verbleibenden Fensterraum mit jquery.

Answer 4

leicht gemacht, die Zahlen <span> und die Spanne absolut nach rechts innerhalb eines Elements mit Überlauf versteckt positionieren.

<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

Das funktionierte wie ein Zauber:

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

Answer 6

Modifizierte HTML-Markup und hinzugefügt einige Javascript zu WebWanderer der jsFiddle Lösung.

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;