溢出到左側而不是右側

我有一個div與overflow:hidden，其中我顯示一個電話號碼，用戶鍵入它。隨着文本向左增長，div內的文本向右對齊，並且傳入的字符被添加到右側。溢出到左側而不是右側

但是，一旦文字足夠大，不適合div，數字的最後一個字符會自動裁剪，用戶看不到她鍵入的新字符。

我想要做的是裁剪左邊的字符，就像div顯示其內容的最右邊並溢出到左邊一樣。我怎樣才能創造這種效果？

overflowing phone number to left

2008-10-20 Serhat Ozgel

113

您是否嘗試過使用下列內容：

direction: rtl;

欲瞭解更多信息，請參閱
http://www.w3schools.com/cssref/pr_text_direction.asp

來源

2008-10-20 11:11:43

+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 傑克

來源

2009-03-24 18:02:50

你可以做float:right，它會溢出到左側，但對我來說，我需要居中DIV如果窗口比元件大，但如果窗口較小，則向左溢出。對此有何想法？

我試着玩direction:rtl，但似乎並沒有改變塊元素的溢出。

我認爲唯一的答案是浮動它的權利，它的右邊的div也浮動右邊，然後將div的寬度設置爲右邊，剩餘的窗口空間的一半用jquery。

來源

2012-04-22 16:57:56 catdotgif

我有同樣的問題，並解決它使用兩個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中並將它溢出到左邊。

來源

2012-09-28 20:02:57 Abe

這工作就像一個魅力：

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

來源

2016-10-05 12:53:12 Dji

溢出到左側而不是右側

回答

相關問題