Pytanie Przelew w lewo zamiast w prawo


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

Ale gdy tekst jest wystarczająco duży, aby nie pasował do elementu div, ostatnie znaki numeru są automatycznie przycinane, a użytkownik nie może zobaczyć nowych znaków, które wpisuje.

Chcę przyciąć lewe znaki, tak jak element div pokazuje najbardziej prawą treść i przelewa się na lewą stronę. Jak mogę stworzyć ten efekt?

overflowing phone number to left


76
2017-10-20 11:09


pochodzenie




Odpowiedzi:


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

direction: rtl;

Aby uzyskać więcej informacji, zobacz
http://www.w3schools.com/cssref/pr_text_direction.asp


121
2017-10-20 11:11



Ostrzeżenie: to nie działa w przypadku wyświetlania kalkulatora ze znakami specjalnymi, takimi jak / i *. - Max
Nie działa również dla ustawień regionalnych z formatowaniem liczb innych niż amerykańskie, np. "" Dla separatora tysięcy. To nie jest poprawne rozwiązanie - Robert Slaney
Ta właściwość nie jest przeznaczona do wyrównania, a także zmieni kolejność słów w środku. F.e. 14:00–15:00 zwróci się do 15:00–14:00 w przeglądarce Firefox. - Andy
Czy to nie zmienia kolejności znaków? - evolutionxbox
Tak, musisz zawinąć zawarte elementy w innym elemencie za pomocą direction: ltr rządzić, aby odwrócić efekt. - Óscar Gómez Alcañiz


Miałem ten sam problem i rozwiązałem go, używając dwóch elementów div. Zewnętrzny div wykonuje obcinanie z lewej strony, a wewnętrzny div z pływającego w prawo.

.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 div i przepełnić ją po lewej stronie.


45
2017-09-28 20:02



Chciałem zobaczyć, jak to działa, więc zrobiłem to JSFiddle przetestować to i działa świetnie! Świetna odpowiedź! Dzięki! - WebWanderer
To jest świetna odpowiedź, ponieważ kierunek rtl ma wiele różnych efektów ubocznych. Jeśli chcesz upewnić się, że wewnętrzny div jest wyrównany do lewej i tylko obcięty w lewo, jeśli div został przekroczony, ustaw .outer-div na max-width: 100% i wyświetl: inline-block. Widzieć tutaj - Luke
Dzięki za JSFiddle WebWanderer. Zaktualizowałem go do użycia overflow: visible więc treść może wyciek z lewej strony. - joeytwiddle


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

Próbowałem się bawić direction:rtl ale wydaje się, że nie zmienia to nadmiaru elementów bloku.

Myślę, że jedyną odpowiedzią jest unoszenie go w prawo, z elementem div po prawej stronie, który jest również przenoszony w prawo, a następnie ustaw szerokość div w prawo na połowę pozostałej przestrzeni okna z jquery.


5
2018-04-22 16:57



Zgodzić się. Poprowadź rodzica w prawo i upewnij się, że żaden pojemnik nie ma przepełnionego zestawu. - Lisa


łatwo zrobić, <span> liczby i pozycję przęsła bezwzględnego na prawo wewnątrz 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
2018-03-24 18:02





To dział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>

2
2017-10-05 12:53