Преливане наляво вместо надясно

Имам div с overflow:hidden, вътре в който показвам телефонен номер, докато потребителят го въвежда. Текстът вътре в div е подравнен надясно и входящите знаци се добавят надясно, докато текстът нараства наляво.

Но след като текстът стане достатъчно голям, за да не се побере в div, последните знаци от номера се изрязват автоматично и потребителят не може да види новите знаци, които въвежда.

Това, което искам да направя, е да изрежа левите знаци, като div показва най-дясната част от съдържанието си и прелива в лявата страна. Как мога да създам този ефект?

препълващ телефонен номер вляво


html css overflow
person Serhat Ozgel    schedule 20.10.2008    source източник
comment
За всеки, който се опитва да накара текста да върви отгоре надолу и подравнен вдясно, разгледайте stackoverflow.com/a/53576895/4418836   -  person Jordan    schedule 17.03.2020

Отговори (6)


arrow_upward
160
arrow_downward

Опитвали ли сте да използвате следното:

direction: rtl;

За повече информация вижте
http://www.w3schools.com/cssref/pr_text_direction.asp

person Rob Bell    schedule 20.10.2008
comment
Предупреждение: това не работи за дисплей на калкулатор със специални знаци като / и *. - person Max; 09.02.2013
comment
Освен това не работи за локали с форматиране на числа, различно от САЩ, като разделител за хиляди. Това не е правилното решение - person Robert Slaney; 13.02.2015
comment
Това свойство не е предназначено за подравняване и ще промени и реда на думите вътре. F.e. 14:00–15:00 ще се превърне в 15:00–14:00 във Firefox. - person Andy; 21.03.2016
comment
Това не обръща ли и реда на героите? - person evolutionxbox; 03.08.2016
comment
Да, трябва да обвиете съдържащите се елементи в друг елемент с правило direction: ltr, за да обърнете ефекта. - person Óscar Gómez Alcañiz; 25.10.2016

arrow_upward
59
arrow_downward

Имах същия проблем и го реших с помощта на два div. Външният div прави изрязването отляво, а вътрешният div прави плаващото вдясно.

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

Трябва да можете да поставите всяко съдържание във вътрешния div и да го препълните отляво.

person Abe    schedule 28.09.2012
comment
Исках да видя как това работи, затова направих този JSFiddle за тестване и работи страхотно! Страхотен отговор! Благодаря! - person WebWanderer; 06.01.2016
comment
Това е чудесен отговор, тъй като direction rtl има всякакви странични ефекти. Ако искате да сте сигурни, че вътрешният div е подравнен вляво и се съкращава само вляво, ако div е надвишен, задайте .outer-div на max-width: 100% и display: inline-block. Вижте тук - person Luke; 11.08.2016
comment
Благодаря за JSFiddle WebWanderer. Актуализирах го, за да използва overflow: visible, така че съдържанието да може да изтече от лявата страна. - person joeytwiddle; 08.09.2016

arrow_upward
8
arrow_downward

Можете да направите float:right и то ще прелее наляво, но в моя случай трябва да центрирам div, ако прозорецът е по-голям от елемента, но да прелея наляво, ако прозорецът е по-малък. Някакви мисли за това?

Опитах да играя с direction:rtl, но това не изглежда да променя препълването на блоковите елементи.

Мисля, че единственият отговор е да го преместите правилно, с div вдясно от него, който също е преместен надясно, след което да зададете ширината на div вдясно до половината от оставащото пространство на прозореца с jquery.

person catdotgif    schedule 22.04.2012
comment
Съгласен. Преместете родителя надясно и се уверете, че нито един междинен контейнер не е с настройка за скрито препълване. - person Lisa; 07.05.2012

arrow_upward
8
arrow_downward

лесно направено, <span> числата и позиционирайте обхвата абсолютно вдясно вътре в елемент със скрито препълване.

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

:)

rgrds Джейк

person Community    schedule 24.03.2009

arrow_upward
6
arrow_downward

Това работи като чар:

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

arrow_upward
0
arrow_downward

Променено HTML маркиране и добавен javascript към решението jsFiddle на 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;
person Subramanian Narasimhan    schedule 17.01.2019