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

106

У меня есть div с overflow:hidden, внутри которого я показываю номер телефона, когда пользователь вводит его. Текст внутри div выравнивается по правому краю, а входящие символы добавляются справа по мере увеличения текста влево.

Но как только текст становится достаточно большим, чтобы не помещаться в div, последние символы числа автоматически обрезаются, и пользователь не может видеть новые символы, которые он вводит.

Что я хочу сделать, так это обрезать левые символы, например, div показывает крайнюю правую часть своего содержимого и выходит за пределы левой стороны. Как мне создать такой эффект?

переполненный номер телефона слева

Серхат Озгель
источник
Для тех, кто пытается заставить текст работать сверху вниз и выровнять по правому краю, проверьте stackoverflow.com/a/53576895/4418836
Джордан

Ответы:

151

Вы пробовали использовать следующее:

direction: rtl;

Для получения дополнительной информации см.
Http://www.w3schools.com/cssref/pr_text_direction.asp.

Роб Белл
источник
22
Предупреждение: это не работает для дисплея калькулятора со специальными символами, такими как / и *.
Макс
11
Он также не работает для языков с форматированием чисел, отличным от США, например "" для разделителя тысяч. Это неправильное решение
Роберт Слэйни
12
Это свойство не предназначено для выравнивания, и оно также изменит порядок слов внутри. Fe 14:00–15:00обратится 15:00–14:00в Firefox.
Энди
3
Разве это тоже не меняет порядок символов?
evolutionxbox
7
Да, вам нужно обернуть содержащиеся элементы в другой элемент с direction: ltrправилом, чтобы обратить эффект.
Оскар Гомес Альканьис,
56

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

Абэ
источник
8
Я хотел увидеть, как это работает, поэтому я сделал этот JSFiddle, чтобы протестировать его, и он отлично работает! Отличный ответ! Спасибо!
WebWanderer 06
4
Это отличный ответ, поскольку у direction RTL есть всевозможные побочные эффекты. Если вы хотите, чтобы внутренний div был выровнен по левому краю и усекался только влево при превышении div, установите для .outer-div значение max-width: 100% и display: inline-block. Смотрите здесь
Лука
2
Спасибо за JSFiddle WebWanderer. Я обновил его, overflow: visibleчтобы контент мог просачиваться с левой стороны .
joeytwiddle
8

Вы можете это сделать, float:rightи он будет переполняться слева, но в моем случае мне нужно центрировать div, если окно больше элемента, но переполнение слева, если окно меньше. Есть мысли по этому поводу?

Я пробовал поиграть, direction:rtlно, похоже, это не изменило переполнение блочных элементов.

Я думаю, что единственный ответ - разместить его правильно, с div справа от него, который также перемещается вправо, а затем установить ширину div справа на половину оставшегося оконного пространства с помощью jquery.

catdotgif
источник
Согласен. Переместите родительский элемент вправо и убедитесь, что для промежуточных контейнеров не установлено значение скрытого переполнения.
Лиза
8

легко сделать, <span>числа и позиционирование диапазона абсолютно справа внутри элемента со скрытым переполнением.

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

:)

rgrds джейк

Эско
источник
5

Это сработало как шарм:

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>
Джи
источник
0

Изменена разметка 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;
Субраманианский Нарасимхан
источник