向左溢出而不是向右溢出

我有一个div overflow:hidden,我在其中显示用户输入的电话号码.div内的文本与右对齐,并且当文本向左扩展时,传入的字符将添加到右侧.

但是一旦文本大到不适合div,数字的最后一个字符就会自动裁剪,用户无法看到她输入的新字符.

我想要做的是裁剪左边的字符,就像div显示其最右边的内容并溢出到左侧.我该如何创造这种效果？

1> Rob Bell..：

---

您是否尝试过使用以下内容:

direction: rtl;

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

---

警告:这对于具有特殊字符(如/和*)的计算器显示不起作用.

---

它也不适用于具有非美国数字格式的语言环境,例如""表示千位分隔符.这不是正确的解决方案

---

此属性不用于对齐,它也会更改内部单词的顺序.Fe`14:00-15:00`将在Firefox中变为"15:00-14:00".

---

是的,您需要使用`direction:ltr`规则将包含的元素包装在另一个元素中以反转效果.

---

这不会颠倒字符的顺序吗？

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;
}

:


  
     
    
A very long line that should be trimmed on the left
  

您应该能够将任何内容放在内部div中并将其溢出到左侧.

---

我想看到这个工作,所以我做了[**这个JSFiddle**](https://jsfiddle.net/WebWanderer/375fmu1q/)来测试它,它很棒!很棒的答案!谢谢!

---

这是一个很好的答案,因为方向rtl有各种各样的副作用.如果要确保内部div保持对齐并且仅在超过div时将其截断到左侧,请将.outer-div设置为max-width:100%并显示:inline-block.见[这里](https://jsfiddle.net/jew4zfyk/)

3> catdotgif..：

---

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

我试过玩,direction:rtl但似乎并没有改变块元素的溢出.

我认为唯一的答案是将其向右浮动,右侧的div也向右浮动,然后使用jquery将div的宽度设置为剩余窗口空间的一半.

4> 小智..：

---

容易完成,数字和位置绝对在一个隐藏溢出的元素内的绝对位置.

    05451234567

:)

rgrds杰克

5> 小智..：

---

这就像一个魅力:

  your short or long comment