溢出到左边而不是右边

我有一个与overflow:hidden的div overflow:hidden ，其中我显示一个电话号码，用户键入它。 div内的文本向右alignment，并且随着文本向左增长，传入的字符被添加到右边。

但是，一旦文字大小不足以容纳div，数字的最后一个字符就会自动裁剪，用户看不到她所键入的新字符。

我想要做的是裁剪左边的字符，就像div显示其内容的最右边，并溢出到左边。 我如何创build这个效果？

Answer 1

你有没有尝试过使用以下内容：

 direction: rtl; 

更多信息请参阅
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

我有同样的问题，并解决了它使用两个div。 外部div在左边剪裁，内部div在右边进行漂移。

 .outer-div { width:70%; margin-left:auto; margin-right:auto; text-align:right; overflow:hidden; white-space: nowrap; } .inner-div { float:right; } : <div class="outer-div"> <div class="inner-div"> <p>A very long line that should be trimmed on the left</p> </div> </div> 

你应该可以把任何内容放在内部div中，并将其放在左边。

Answer 3

你可以做float:right ，它会溢出到左边，但在我的情况下，如果窗口大于元素，我需要居中div，但是如果窗口较小，则溢出到左边。 对此有什么想法？

我试着玩弄direction:rtl但是这似乎并没有改变块元素的溢出。

我认为唯一的答案是浮动它正确的，右边的div也是正确的浮动，然后设置div的宽度右侧的一半剩余的窗口空间与jQuery。

Answer 4

轻松完成，将数字和跨度绝对地定位在隐藏溢出的元素内。

 <div style="width: 65px; height: 20px; overflow: hidden; position: relative; background: #66FF66;"> <span style="position: absolute; right: 0;">05451234567</span> </div> 

🙂

rgrds杰克

Answer 5

这工作像一个魅力：

 <div style="direction: rtl;"> <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span> </div>