向左溢出而不是向右溢出答案

【问题标题】：Overflow to left instead of right向左溢出而不是向右溢出
【发布时间】：2010-09-18 02:22:19
【问题描述】：

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

但是一旦文本大到无法放入 div 中，数字的最后一个字符会被自动裁剪，用户无法看到她输入的新字符。

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

【问题讨论】：

对于任何试图让文本从上到下并右对齐的人，请查看stackoverflow.com/a/53576895/4418836

标签： css html overflow

【解决方案1】：

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

direction: rtl;

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

【讨论】：

警告：这不适用于带有 / 和 * 等特殊字符的计算器显示。
它也不适用于非美国数字格式的语言环境，例如“”代表千位分隔符。这不是正确的解决方案
这个属性不是用来对齐的，它也会改变里面的单词顺序。 F.e. 14:00–15:00 在 Firefox 中会变成 15:00–14:00。
这不是也颠倒了字符的顺序吗？
是的，您需要使用direction: ltr 规则将包含的元素包装在另一个元素中以反转效果。

【解决方案2】：

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

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

:)

rgrds 杰克

【讨论】：

【解决方案3】：

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

我尝试过使用direction:rtl，但这似乎并没有改变块元素的溢出。

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

【讨论】：

同意。将父级浮动到右侧并确保没有中间容器将溢出设置为隐藏。

【解决方案4】：

我遇到了同样的问题并使用两个 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 并在左侧溢出。

【讨论】：

我想看看这个工作，所以我做了this JSFiddle 来测试它，它工作得很好！很好的答案！谢谢！
这是一个很好的答案，因为方向 rtl 有各种副作用。如果要确保内部 div 左对齐并且仅在超出 div 时向左截断，请将 .outer-div 设置为 max-width: 100% 并 display: inline-block。见here
感谢 JSFiddle WebWanderer。我将其更新为使用overflow: visible，因此内容可以leak out of the left hand side。

【解决方案5】：

这就像一个魅力：

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

【讨论】：

这不仅有效，而且此解决方案不会“破坏”您的外部容器与不需要的属性。小心不要忘记行内块显示。谢谢！

【解决方案6】：

修改了 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;

【讨论】：

【解决方案7】：

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

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

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

&lt;p&gt;156189789123&lt;/p&gt;

【讨论】：