Css 溢出到左侧而不是右侧

我有一个div，带有

overflow:hidden

，当用户键入电话号码时，我会在其中显示电话号码。div内的文本向右对齐，当文本向左增长时，输入字符向右添加

但是，一旦文本足够大，无法放入div，数字的最后一个字符将被自动裁剪，用户将无法看到她键入的新字符

我要做的是裁剪左边的字符，就像div显示最右边的内容并溢出到左边一样。我怎样才能创造这种效果

---

您是否尝试过使用以下方法：

direction: rtl;

有关更多信息，请参见

很容易完成，

在隐藏溢出的元素内，将绝对跨距向右定位

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

05451234567

：）

RGRD

---

jake

您可以执行

float:right

操作，它将溢出到左侧，但在我的例子中，如果窗口大于元素，则需要将div居中，如果窗口较小，则溢出到左侧。有什么想法吗

我试着使用

direction:rtl

，但这似乎并没有改变块元素的溢出

---

我认为唯一的解决办法是将它向右浮动，在它的右边有一个div，这个div也向右浮动，然后用jquery将右边div的宽度设置为剩余窗口空间的一半。

我遇到了同样的问题，并用两个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>

.outer div{
宽度：70%；
左边距：自动；
右边距：自动；
文本对齐：右对齐；
溢出：隐藏；
空白：nowrap；
}
.内分区{
浮动：对；
}
:
应该在左边修剪的一条很长的线

---

您应该能够将任何内容放入内部div，并在左侧溢出。

这就像一个符咒：

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

你的简短或长篇评论

修改了HTML标记，并向WebLower的JSFIDLE解决方案添加了一些javascript

HTML:

JS:

---

同意。将父级向右浮动，并确保没有干预容器将溢出设置为隐藏。警告：这不适用于具有特殊字符（如/和*）的计算器显示。它也不适用于具有非US数字格式的区域设置，如“”表示千位分隔符。这不是正确的解决方案此属性不用于对齐，它也会更改内部单词的顺序。F.e.

14:00–15:00

将在Firefox中变为

15:00–14:00

。这是否也会颠倒字符的顺序？是的，您需要使用

方向：ltr

规则将包含的元素包装到另一个元素中以反转效果。我希望看到这一效果，所以我做了测试，效果非常好！回答得好！谢谢这是一个很好的答案，因为方向rtl有各种各样的副作用。如果要确保内部div是左对齐的，并且仅在超过div时才会向左截断，请将.outer div设置为max width:100%并显示：inline块。请参阅感谢JSFIDLE网络漫游者。我将其更新为使用

overflow:visible

，以便内容可以显示。对于试图使文本从上到下并右对齐的任何人，请签出

<div id="outer-div">

    <p>ipsum dolor amet bacon venison porchetta spare ribs, tongue turducken alcatra doner leberkas t-bone rump ball tip hamburger drumstick. Shoulder strip steak ribeye, kielbasa fatback pig kevin drumstick biltong pork short loin rump. Biltong doner ribeye, alcatra landjaeger tenderloin drumstick t-bone pastrami andouille. Sirloin spare ribs fatback, bresaola strip steak alcatra landjaeger kielbasa cupim doner. </p>

</div>

#outer-div {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
  border:1px solid black;
}

let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;