Überlauf nach links statt nach rechts

105

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?

überlaufende Telefonnummer nach links

Serhat Ozgel
quelle
Für alle, die versuchen, Text von oben nach unten und rechtsbündig auszuführen
Jordanien

Antworten:

149

Haben Sie versucht, Folgendes zu verwenden:

direction: rtl;

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

Rob Bell
quelle
22
Warnung: Dies funktioniert nicht für eine Taschenrechneranzeige mit Sonderzeichen wie / und *.
Max
11
Es funktioniert auch nicht für Gebietsschemas mit nicht US-amerikanischer Nummernformatierung, wie "" für Tausendertrennzeichen. Dies ist nicht die richtige Lösung
Robert Slaney
12
Diese Eigenschaft ist nicht für die Ausrichtung vorgesehen und ändert auch die Reihenfolge der Wörter im Inneren. Fe 14:00–15:00wird sich 15:00–14:00in Firefox wenden .
Andy
3
Kehrt dies nicht auch die Reihenfolge der Zeichen um?
Evolutionxbox
7
Ja, Sie müssen die enthaltenen Elemente mit einer direction: ltrRegel in ein anderes Element einschließen, um den Effekt umzukehren.
Óscar Gómez Alcañiz
56

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.

Abe
quelle
8
Ich wollte, dass das funktioniert, also habe ich diese JSFiddle gemacht , um sie zu testen, und sie funktioniert großartig! Gute Antwort! Vielen Dank!
WebWanderer
4
Dies ist eine großartige Antwort, da die Richtung RTL alle möglichen Nebenwirkungen hat. Wenn Sie sicherstellen möchten, dass das innere Div linksbündig ist und nur dann nach links abgeschnitten wird, wenn das Div überschritten wird, setzen Sie .outer-div auf max-width: 100% und display: inline-block. Siehe hier
Luke
2
Vielen Dank für den JSFiddle WebWanderer. Ich habe es aktualisiert, damit es verwendet werden kann, overflow: visibledamit der Inhalt aus der linken Seite austreten kann .
Joeytwiddle
7

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.

catdotgif
quelle
Zustimmen. Bewegen Sie das übergeordnete Element nach rechts und stellen Sie sicher, dass kein Überlauf zwischen den Containern ausgeblendet ist.
Lisa
7

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

Esko
quelle
5

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>
Dji
quelle
0

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;
Subramanian Narasimhan
quelle