向左而不是向右溢出

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

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

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

overflowing phone number to left

89056 次浏览
小开
最佳答案

你有否尝试使用以下方法:

direction: rtl;

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

小开

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

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

:)

Rgrds Jake

小开

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

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

我认为唯一的解决办法是向右浮动它，在它的右边放置一个也向右浮动的 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>

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

小开

这种方法非常有效:

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

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

约翰逊:

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

这里有一个方法更容易的解决方案使用 Flexbox。它也适用于伪元素。

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


font-size: 2em;
width: 120px;
background: yellow;
}
<p>156189789123</p>


提交答案