Перелив влево вместо вправо

У меня есть 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 был выровнен по левому краю и усекался только влево, если он превышен, установите для .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