Переливайтеся вліво, а не вправо

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

Але як тільки текст буде достатньо великим, щоб не вмістився у діві, останні символи номера автоматично обрізаються, і користувач не може побачити нові символи, які вона вводить.

Що я хочу зробити, це обрізати ліві символи, як-от div показує найправішу частину вмісту і переливається в ліву частину. Як я можу створити цей ефект?

Ви спробували використати таке:

direction: rtl;

Для отримання додаткової інформації див.
Http://www.w3schools.com/cssref/pr_text_direction.asp

У мене була та сама проблема, і я вирішив її за допомогою двох дівок. Зовнішній дів робить відсікання ліворуч, а внутрішній дів плаває праворуч.

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

Ви повинні мати можливість помістити будь-який вміст у внутрішній розділ і переповнити його зліва.

Ви можете зробити float:right і він переллється ліворуч, але в моєму випадку мені потрібно центрувати діл, якщо вікно більше елемента, але переповнювати ліворуч, якщо вікно менше. Будь-які думки з цього приводу?

Я спробував пограти з, direction:rtlале це, схоже, не змінило переповнення елементів блоку.

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

легко зробити, <span>цифри і розташуйте проміжок абсолютним праворуч всередині елемента з прихованим переповненням.

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

:)

rgrds jake

Це спрацювало як шарм:

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

Змінено розмітку 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;