How to cut overflow on the left side

Question

I can cut the overflowing content on the right side, as shown below:

HTML

<div>Hello World!</div> 

CSS

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

Result

How can I disable it on the left side?

Answer 1

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

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

WORKING DEMO .

It should be noted that, by changing direction , the exclamation point is Hello World! go left like !Hello world .

To fix this, you can wrap the <bdi> text as follows:

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

UPDATED DEMO .

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

Answer 2

Just set the direction property to rtl:

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

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