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 are added to right as the text grows to left.

But once the text is big enough not to fit in the div, last characters of the number is automatically cropped and the user cannot see the new characters she types.

What I want to do is crop the left characters, like the div is showing the rightmost of its content and overflowing to the left side. How can I create this effect?

overflowing phone number to left

For anyone who's try to make text run top to bottom and right aligned, checkout https://stackoverflow.com/a/53576895/4418836 — Jordan, Mar 17 '20 at 14:04

score 184 · Accepted Answer · edited May 30 '13 at 12:16

184

Have you tried using the following:

direction: rtl;

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

edited May 30 '13 at 12:16

Martin Prikryl

188,800
56
490
992

answered Oct 20 '08 at 11:11

Rob Bell

3,542
5
28
49

23

Warning : this does not work for a calculator display with special characters like / and * . – Max Feb 09 '13 at 01:23
11

It also doesn't work for locales with non US number formatting, like " " for thousand separator. This is not the correct solution – Robert Slaney Feb 13 '15 at 00:18
15

This property is not meant for alignment, and it will change the order of words inside as well. F.e. `14:00–15:00` will turn to `15:00–14:00` in Firefox. – Andy Mar 21 '16 at 14:58
3

Doesn't this reverse the order of the characters too? – evolutionxbox Aug 03 '16 at 14:05
9

Yes, you need to wrap the contained elements in another element with `direction: ltr` rule to reverse the effect. – Óscar Gómez Alcañiz Oct 25 '16 at 08:20
@ÓscarGómezAlcañiz this does not work – Robert Haslinger Sep 20 '21 at 16:36
1

You can use `unicode-bidi: bidi-override; direction: rtl;` and *reversed* string inside inline element to achieve the result. `bidi-override` will ignore any implicit processing of data and will not try to dive into text data. – filimonic Oct 30 '21 at 22:46
This is terrible for accessibility, screen reader support, SEO, ... anything that relies on programmatic DOM inspection and semantics. Please don't do this. – felixfbecker Nov 29 '22 at 18:55

score 65 · Answer 2 · edited Oct 01 '12 at 11:40

65

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.

edited Oct 01 '12 at 11:40

ЯegDwight

24,821
10
45
52

answered Sep 28 '12 at 20:02

Abe

651
5
2

10

I wanted to see this working, so I made [**this JSFiddle**](https://jsfiddle.net/WebWanderer/375fmu1q/) to test it and it works great! Great answer! Thanks! – WebWanderer Jan 06 '16 at 19:18
4

This is a great answer as direction rtl has all sorts of side effects. If you want to ensure the inner div is left aligned and only truncated to the left if the div is exceeded, set the .outer-div to max-width: 100% and display: inline-block. See [here](https://jsfiddle.net/jew4zfyk/) – Luke Aug 11 '16 at 00:28
2

Thanks for the JSFiddle WebWanderer. I updated it to use `overflow: visible` so the content can [leak out of the left hand side](https://jsfiddle.net/375fmu1q/22/). – joeytwiddle Sep 08 '16 at 05:57

score 13 · Answer 3 · edited Oct 05 '16 at 14:03

13

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>

edited Oct 05 '16 at 14:03

RamenChef

5,557
11
31
43

answered Oct 05 '16 at 12:53

Dji

131
1
2

Not only does this work, but also this solution does not "corrupt" your outer container with unwanted properties. Be careful and do not forget the inline-block display. Thank you! – Robert Haslinger Sep 20 '21 at 16:43

score 12 · Answer 4 · answered Sep 01 '21 at 09:02

12

Here is an way easier solution using flexbox. It also works on pseudo elements.

p {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;

  font-size: 2em;
  width: 120px;
  background: yellow;
}

<p>156189789123</p>

answered Sep 01 '21 at 09:02

Andreas Furster

1,558
1
12
28

1

Is it possible to add "..." to the beginning, such as is done with text-overflow:ellipsis? – justdvl Sep 25 '22 at 15:21
@justdvl `p::before { content: "..."; }`? – code Oct 06 '22 at 23:56

catdotgif · Answer 5 · 2012-04-22T17:13:49.770

10

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.

edited Apr 22 '12 at 17:13

answered Apr 22 '12 at 16:57

catdotgif

1,738
3
15
13

Agree. Float the parent to the right and ensure no intervening containers have overflow set to hidden. – Lisa May 07 '12 at 06:53

score 10 · Answer 6 · edited Apr 28 '12 at 08:47

10

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

edited Apr 28 '12 at 08:47

Esko

29,022
11
55
82

answered Mar 24 '09 at 18:02

score 0 · Answer 7 · answered Jan 17 '19 at 03:44

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;

Overflow to left instead of right

7 Answers7

Linked

Related