Überlauf nach links statt rechts

Question

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

Aber sobald der Text groß genug ist, um nicht in das Div zu passen, wird das letzte Zeichen der Nummer automatisch beschnitten und der Benutzer kann die neuen Zeichen, die er eingibt, nicht sehen.

Ich möchte die linken Zeichen beschneiden, so wie das Div den rechten Inhalt zeigt und auf der linken Seite überläuft. Wie kann ich diesen Effekt erzeugen?

Answer 1

Haben Sie versucht, die folgende Verwendung:

direction: rtl; 

http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

leicht getan, <span> die Zahlen sehen Weitere Informationen und die Spanne absolut nach rechts innen eine Position Element mit Überlauf ausgeblendet.

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

:)

rgrds jake

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 , aber Überlauf nach links, wenn das Fenster kleiner ist. Irgendwelche Gedanken dazu?

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

Ich denke, die einzige Antwort ist, es richtig zu schweben, mit einem div auf der rechten Seite, die auch nach rechts schwebt, dann legen Sie die Breite des div nach rechts auf die Hälfte der verbleibenden Fensterfläche mit jquery.

Answer 4

Ich hatte das gleiche Problem und löste es mit zwei Divs. Das äußere div macht das Clipping auf der linken Seite und das innere div macht das Floating 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, jeden Inhalt innerhalb der inneren div und überlaufen Sie es auf der linken Seite.

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>