溢出到左侧而不是右侧

问题描述：

我有一个div与overflow:hidden，其中我显示一个电话号码，用户键入它。随着文本向左增长，div内的文本向右对齐，并且传入的字符被添加到右侧。溢出到左侧而不是右侧

但是，一旦文字足够大，不适合div，数字的最后一个字符会自动裁剪，用户看不到她键入的新字符。

我想要做的是裁剪左边的字符，就像div显示其内容的最右边并溢出到左边一样。我怎样才能创造这种效果？

overflowing phone number to left

答

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

direction: rtl;

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

+14

警告：这并不与特殊字符，如计算器显示的工作/和*。 – Max 2013-02-09 01:23:25

它也不适用于非美国数字格式的区域设置，例如“”为千分隔符。这不是正确的解决方案 – 2015-02-13 00:18:05

这个属性并不意味着对齐，它也会改变里面的单词的顺序。 F.E. `14：00-15：00`将在Firefox中变成`15：00-14：00`。 – Andy 2016-03-21 14:58:35

答

容易做到，<span>的数量和跨度绝对位置内的权隐藏溢出的元素。

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

rgrds 杰克

答

你可以做float:right，它会溢出到左侧，但对我来说，我需要居中DIV如果窗口比元件大，但如果窗口较小，则向左溢出。对此有何想法？

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

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

答

我有同样的问题，并解决它使用两个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>

溢出到左侧而不是右侧

相关推荐