左溢而不是右溢

105

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

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

我想做的是裁剪左边的字符，就像div显示的是最右边的内容并溢出到左侧。如何产生这种效果？

左溢电话号码

css html overflow

— 瑟哈特·奥兹格尔
source

对于任何尝试使文本从上到下并右对齐的人，请

— 约旦

149

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

direction: rtl;

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

— 罗伯·贝尔
source

22

警告：这不适用于带有/和*等特殊字符的计算器显示。

— 2013年

11

它也不适用于非美国数字格式的语言环境，例如“”表示千位分隔符。这不是正确的解决方案

— Robert Slaney 2015年

12

此属性不是用于对齐的，它也会更改内部单词的顺序。Fe 14:00–15:00将15:00–14:00在Firefox中使用。

— 安迪

3

这样是否也颠倒了字符的顺序？

— evolutionxbox

7

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

— 奥斯卡·戈麦斯阿尔卡尼斯

56

我有同样的问题，并使用两个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并在左侧将其溢出。

— 安倍
source

8

我想看到它的工作原理，所以我制作了这个JSFiddle来对其进行测试，并且效果很好！好答案！谢谢！

— WebWanderer

4

这是一个很好的答案，因为rtl方向有各种各样的副作用。如果要确保内部div保持对齐，并且仅在超出div时才向左截断，请将.outer-div设置为max-width：100％并显示：inline-block。看到这里

— 路加福音

2

感谢您的JSFiddle WebWanderer。我对其进行了更新，以overflow: visible使内容可以从左侧泄漏出去。

— joeytwiddle

8

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

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

我认为唯一的答案是将其正确浮动，在其右侧也有一个div浮动，然后用jQuery将div的宽度设置为右侧，将其保留为剩余窗口空间的一半。

— catdotgif
source

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

— 丽莎

8

容易做到的是，<span>将数字和范围的绝对值绝对定位在隐藏有溢出的元素内的右侧。

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

:)

杰克·杰克

— 埃斯科
source

5

这就像一个魅力：

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

— 大吉
source

0

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

— Subramanian纳拉西姆汗
source