Frage Überlauf nach links statt nach rechts


Ich habe ein Div mit overflow:hidden, in dem ich eine Telefonnummer zeige, 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 Zahl automatisch abgeschnitten und der Benutzer kann die neuen Zeichen, die er eingibt, nicht sehen.

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

overflowing phone number to left


76
2017-10-20 11:09


Ursprung


Antworten:


Haben Sie Folgendes versucht:

direction: rtl;

Für weitere Informationen siehe
http://www.w3schools.com/cssref/pr_text_direction.asp


121
2017-10-20 11:11



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 in das innere div zu legen und es auf der linken Seite zu überfließen.


45
2017-09-28 20:02



Du kannst tun float:right und 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 mit herumzuspielen direction:rtl aber das scheint den Überlauf von Blockelementen nicht zu ändern.

Ich denke, die einzige Antwort ist, es richtig zu schweben, mit einem div rechts davon, das auch nach rechts schwebt, dann setze die Breite des div nach rechts, um den verbleibenden Fensterplatz mit jquery zu halbieren.


5
2018-04-22 16:57



leicht gemacht, <span> die Zahlen und Position der Spannweite absolut nach rechts innerhalb eines Elements 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


5
2018-03-24 18:02



Dies funktionierte wie ein Charme:

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

2
2017-10-05 12:53