How to cut off overflow on the left side

Question

I can cut off the overflowed content on the right side, as follows:

HTML

<div>Hello World!</div>

CSS

div{width:50px; background: red; overflow: hidden; white-space: nowrap;}

Result

How can I cut it off on the left side?

Answer 1

Just change the direction of the text to right-to-left by direction: rtl;

div {
  width:50px;
  background: red;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
}

WORKING DEMO.

I should note that by changing the direction, the exclamation mark of Hello World! will go to the left as !Hello world.

In order to fix that, you could wrap the text by <bdi> element as follows:

<div>
   <bdi>Hello World!</bdi>
</div>

UPDATED DEMO.

Or use unicode-bidi: isolate on a <span> element (for supported web browsers)

Answer 2

Just set direction property to rtl:

div{
    direction:rtl;
    width:50px;
    background: red; 
    overflow: hidden; 
    white-space: nowrap;
}

Working example: http://jsfiddle.net/5Hj3Q/