it-swarm.com.de

Überlauf nach links statt nach rechts

Ich habe ein div mit overflow:hidden, in dem eine Telefonnummer angezeigt wird, während der Benutzer sie eingibt. Der Text im div wird rechts ausgerichtet und eingehende Zeichen werden 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 abgeschnitten und der Benutzer kann die neuen Zeichen, die er eingibt, nicht sehen.

Was ich tun möchte, ist das Beschneiden der linken Zeichen, als würde das div den Inhalt ganz rechts anzeigen und auf der linken Seite überlaufen. Wie kann ich diesen Effekt erzeugen?

overflowing phone number to left

86
Serhat Ozgel

Haben Sie versucht, Folgendes zu verwenden:

direction: rtl;

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

134
Rob Bell

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 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, Inhalte in das innere Div einzubringen und auf der linken Seite überzulaufen.

50
Abe

Sie können 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 direction:rtl herumzuspielen, aber das scheint den Überlauf von Blockelementen nicht zu ändern.

Ich denke, die einzige Antwort ist, es nach rechts zu verschieben, mit einem Div rechts davon, das ebenfalls nach rechts geschoben ist, und dann die Breite des Div nach rechts auf die Hälfte des verbleibenden Fensterbereichs mit Jquery festzulegen.

7
catdotgif

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

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

:)

rgrds jake

5
jake

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>
5
Dji

HTML-Markup geändert und Javascript zur jsFiddle-Lösung von WebWanderer 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;