如何切断左侧溢出

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网络浏览器）

Answer 2

只需将direction属性设置为rtl：

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

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