Html 向左溢出而不是向右溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/218065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow to left instead of right
提问by Serhat Ozgel
I have a div with overflow:hidden, inside which I show a phone number as the user types it. The text inside the div is aligned to right and incoming characters are added to right as the text grows to left.
我有一个带有 的 div overflow:hidden，在其中显示用户键入的电话号码。div 内的文本向右对齐，随着文本向左增长，传入的字符将添加到右侧。
But once the text is big enough not to fit in the div, last characters of the number is automatically cropped and the user cannot see the new characters she types.
但是，一旦文本大到无法放入 div 中，数字的最后一个字符将被自动裁剪，用户将看不到她键入的新字符。
What I want to do is crop the left characters, like the div is showing the rightmost of its content and overflowing to the left side. How can I create this effect?
我想要做的是裁剪左边的字符，就像 div 显示其最右边的内容并溢出到左侧一样。我怎样才能创造这种效果？
回答by Rob Bell
Have you tried using the following:
您是否尝试过使用以下方法：
direction: rtl;
For more information see
http://www.w3schools.com/cssref/pr_text_direction.asp
有关更多信息，请参阅
http://www.w3schools.com/cssref/pr_text_direction.asp
回答by Abe
I had the same problem and solved it using two divs. The outer div does the clipping on the left and the inner div does the floating to the right.
我遇到了同样的问题并使用两个 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>
You should be able to put any content inside the inner div and overflow it on the left.
您应该能够将任何内容放入内部 div 并将其溢出到左侧。
回答by catdotgif
You can do float:rightand it will overflow to the left, but in my case I need to center the div if the window is larger than the element, but overflow to the left if the window is smaller. Any thoughts on that?
你可以这样做float:right，它会向左溢出，但在我的情况下，如果窗口大于元素，我需要将 div 居中，但如果窗口较小，则向左溢出。对此有什么想法吗？
I tried playing around with direction:rtlbut that doesn't appear to change the overflow of block elements.
我尝试玩弄，direction:rtl但这似乎并没有改变块元素的溢出。
I think the only answer is to float it right, with a div to the right of it that's also floated right, then set the width of the div to the right to half the remaining window space with jquery.
我认为唯一的答案是将它向右浮动，在它右侧有一个 div，它也向右浮动，然后使用 jquery 将 div 的宽度设置为右侧剩余窗口空间的一半。
回答by catdotgif
easily done, <span>the numbers and position the span absolute to the right inside an element with overflow hidden.
很容易完成，<span>数字和跨度绝对位于隐藏溢出的元素内。
<div style="width: 65px; height: 20px;
overflow: hidden; position: relative; background: #66FF66;">
<span style="position: absolute; right: 0;">05451234567</span>
</div>
:)
:)
rgrds jake
rgrds Hyman
回答by Dji
This worked like a charm:
这就像一个魅力：
<div style="direction: rtl;">
<span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>
回答by Subramanian Narasimhan
Modified HTML markup and added some javascript to WebWanderer's jsFiddle solution.
修改了 HTML 标记并向 WebWanderer 的 jsFiddle 解决方案添加了一些 javascript。
https://jsfiddle.net/urulai/bfzqgreo/3/
https://jsfiddle.net/urulai/bfzqgreo/3/
HTML:
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:
CSS：
#outer-div {
width:100%;
margin-left:auto;
margin-right:auto;
text-align:right;
overflow:hidden;
white-space: nowrap;
border:1px solid black;
}
JS:
JS：
let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;
