Как отрезать переполнение на левой стороне

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.

Или использовать unicode-bidi: isolate на <span> элемент (для supported веб-браузеры)

Answer 2

Просто установите направление собственности на РТЛ:

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

Рабочий пример: http://jsfiddle.net/5Hj3Q/