How to cut off overflow on the left side

问题

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?

回答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)

回答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/

来源：https://stackoverflow.com/questions/22126759/how-to-cut-off-overflow-on-the-left-side