Przepełnienie w lewo zamiast w prawo


105

Mam element div overflow:hidden, w którym pokazuję numer telefonu, gdy użytkownik go wpisuje. Tekst wewnątrz elementu div jest wyrównany do prawej strony, a nadchodzące znaki są dodawane do prawej, gdy tekst rośnie w lewo.

Ale gdy tekst jest wystarczająco duży, aby nie zmieścić się w div, ostatnie znaki liczby są automatycznie przycinane, a użytkownik nie widzi nowych znaków, które wpisuje.

To, co chcę zrobić, to przyciąć lewe znaki, tak jak div wyświetla zawartość po prawej stronie i przepełnia lewą stronę. Jak mogę stworzyć taki efekt?

przepełniony numer telefonu po lewej stronie


Dla każdego, kto próbuje ustawić tekst od góry do dołu i wyrównany do prawej, przejdź do kasy stackoverflow.com/a/53576895/4418836
Jordan

Odpowiedzi:


149

Czy próbowałeś użyć następujących:

direction: rtl;

Więcej informacji można znaleźć pod
adresem http://www.w3schools.com/cssref/pr_text_direction.asp


22
Ostrzeżenie: to nie działa w przypadku wyświetlacza kalkulatora ze znakami specjalnymi, takimi jak / i *.
Max

11
Nie działa również w przypadku ustawień narodowych z formatowaniem liczb innym niż amerykański, np. „” Dla separatora tysięcy. To nie jest poprawne rozwiązanie
Robert Slaney

12
Ta właściwość nie jest przeznaczona do wyrównywania i zmieni również kolejność słów w środku. Fe 14:00–15:00przejdzie do 15:00–14:00Firefoksa.
Andy

3
Czy to również nie odwraca kolejności znaków?
evolutionxbox,

7
Tak, musisz zawinąć zawarte elementy w inny element za pomocą direction: ltrreguły, aby odwrócić efekt.
Óscar Gómez Alcañiz

56

Miałem ten sam problem i rozwiązałem go za pomocą dwóch elementów div. Zewnętrzny element div przycina po lewej stronie, a wewnętrzny element przestawia się po prawej.

.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>

Powinieneś być w stanie umieścić dowolną zawartość wewnątrz wewnętrznego div i przepełnić go po lewej stronie.


8
Chciałem zobaczyć, jak to działa, więc stworzyłem ten JSFiddle, aby go przetestować i działa świetnie! Świetna odpowiedź! Dzięki!
WebWanderer

4
To świetna odpowiedź, ponieważ kierunek rtl ma różnego rodzaju skutki uboczne. Jeśli chcesz mieć pewność, że wewnętrzny element div jest wyrównany do lewej i obcięty tylko do lewej, jeśli zostanie przekroczony, ustaw .outer-div na max-width: 100% i display: inline-block. Zobacz tutaj
Luke

2
Dzięki za JSFiddle WebWanderer. Zaktualizowałem go do użycia, overflow: visibleaby zawartość mogła wyciekać z lewej strony .
joeytwiddle

8

Możesz to zrobić float:righti przepełni się w lewo, ale w moim przypadku muszę wyśrodkować element div, jeśli okno jest większe niż element, ale przepełnienie w lewo, jeśli okno jest mniejsze. Jakieś przemyślenia na ten temat?

Próbowałem się bawić, direction:rtlale nie wydaje się, aby zmieniało to przepełnienie elementów blokowych.

Myślę, że jedyną odpowiedzią jest przesunięcie go w prawo, z elementem div po prawej stronie, który również jest przesunięty w prawo, a następnie ustawienie szerokości elementu div po prawej stronie na połowę pozostałej przestrzeni okna za pomocą jquery.


Zgodzić się. Przesuń element nadrzędny w prawo i upewnij się, że żaden z kontenerów nie ma przepełnienia ustawionego na ukryty.
Lisa

8

łatwo zrobić, <span>liczby i położenie zakresu absolutnego po prawej stronie elementu z ukrytym przepełnieniem.

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

:)

rgrds Jake


5

To zadziałało jak urok:

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

0

Zmodyfikowano znaczniki HTML i dodano trochę javascript do rozwiązania jsFiddle firmy WebWanderer.

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;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.