我有一个overflow:hidden
的div,我在其中显示用户输入的电话号码。 div中的文本与右边对齐,并且当文本向左移动时,传入的字符将添加到右边。
但是一旦文字大到不适合div,数字的最后一个字符就会被自动裁剪,用户看不到她输入的新字符。
我想要做的是裁剪左边的字符,就像div显示最右边的内容并溢出到左边。如何创建此效果?
答案 0 :(得分:139)
答案 1 :(得分:51)
我有同样的问题并使用两个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中并将其溢出到左侧。
答案 2 :(得分:7)
你可以做float:right
它会溢出到左边,但在我的情况下,如果窗口大于元素,我需要居中div,但如果窗口较小则需要向左溢出。有什么想法?
我尝试使用direction:rtl
,但这似乎不会改变块元素的溢出。
我认为唯一的答案是将其向右浮动,右侧的div也向右浮动,然后使用jquery将div的宽度设置为剩余窗口空间的一半。
答案 3 :(得分:5)
轻松完成,<span>
数字并将跨度绝对位于隐藏溢出的元素内的右侧。
<div style="width: 65px; height: 20px;
overflow: hidden; position: relative; background: #66FF66;">
<span style="position: absolute; right: 0;">05451234567</span>
</div>
:)
rgrds 杰克
答案 4 :(得分:5)
这就像一个魅力:
<div style="direction: rtl;">
<span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>
答案 5 :(得分: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;