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

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

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

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

overflowing phone number to left

Ответы

Ответ 2

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

Ответ 3

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

Я попытался сыграть с direction:rtl, но это не изменит переполнение элементов блока.

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

Ответ 4

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

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

:)

rgrds Jake

Ответ 5

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

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

Ответ 6

Изменена разметка HTML и добавлен JavaScript в решение WebSanderer jsFiddle.

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;