Overflow to left instead of right

Question

I have a div with overflow:hidden, inside which I show a phone number as the user types it. The text inside the div is aligned to right and incoming characters

Answer 1

You can do float:right and it will overflow to the left, but in my case I need to center the div if the window is larger than the element, but overflow to the left if the window is smaller. Any thoughts on that?

I tried playing around with direction:rtl but that doesn't appear to change the overflow of block elements.

I think the only answer is to float it right, with a div to the right of it that's also floated right, then set the width of the div to the right to half the remaining window space with jquery.

Answer 2

Have you tried using the following:

direction: rtl;

For more information see
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 3

easily done, <span> the numbers and position the span absolute to the right inside an element with overflow hidden.

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

:)

rgrds jake

Answer 4

This worked like a charm:

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

Answer 5

I had the same problem and solved it using two divs. The outer div does the clipping on the left and the inner div does the floating to the right.

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

You should be able to put any content inside the inner div and overflow it on the left.

Answer 6

Modified HTML markup and added some javascript to WebWanderer's jsFiddle solution.

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;