如何切断溢出左侧

Question

我可以切断右侧溢出的内容，具体如下：

HTML

<div>Hello World!</div> 

CSS

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

结果

如何在左侧将其切断？

Answer 1

文本的方向就改变为从右到左通过direction: rtl;

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

WORKING DEMO。

我应该注意，通过更改direction，感叹号Hello World!将会左移!Hello world。

为了解决这个问题，你可以通过<bdi>元素如下自动换行：

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

UPDATED DEMO。

还是一个<span>元素上使用unicode-bidi: isolate（为supported Web浏览器）

Answer 2

只需设置方向属性RTL：

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

工作例如：http://jsfiddle.net/5Hj3Q/