How To Cut Off Overflow On The Left Side

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

Hello World!

CSS div{width:50px; background: red; overflow: hidden; white-space: no

Solution 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)

Solution 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/