css - 向左溢出而不是向右溢出

Question

我有一个带有 的 div overflow:hidden，在用户键入电话号码时，我会在其中显示电话号码。div 内的文本向右对齐，并且随着文本向左增长，传入的字符被添加到右侧。

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

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

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

很容易做到，<span>数字和跨度绝对位置位于元素内的右侧，并隐藏了溢出。

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

:)

rgrds 杰克

Answer 4

这就像一个魅力：

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

Answer 5

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

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

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

Answer 6

这是使用 flexbox 的一种更简单的解决方案。它也适用于伪元素。

p {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;

  font-size: 2em;
  width: 120px;
  background: yellow;
}

<p>156189789123</p>

Answer 7

修改了 HTML 标记并在 WebWanderer 的 jsFiddle 解决方案中添加了一些 javascript。

https://jsfiddle.net/urulai/bfzqgreo/3/

HTML：

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

CSS：

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

JS：

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