如何防止webkit破解長文本

Question

我想在狀態欄中顯示URL。我希望狀態欄只有一行處理溢出與文本溢出：省略號。

的長URL總是打破這樣的：jadajajajaj-
jadajajajdaj-ajdjjajdaj

我希望它像jadajajajaj-jadajajajdaj-ajdj ...

我只是儘可能：

<div style="position:fixed;top:12.7ex;left:0ex;display:inline-block;width:100%;z-index:5;text-overflow:ellipsis;background:inherit;"> 
     <div id="status-bar" class="ui-corner-all" 
      style="width:1000%;display:inline-block;margin-right:1.4ex;padding:0.3ex 0.5ex 0ex 1ex;overflow-y:hidden;overflow-x:hidden;color:grey;font-size:3.3ex;height:3.2ex;font-weight:normal;text-align:left;"></div> 
    </div> 

我使用寬度：1000％來克服這個問題，但我不會看到...這樣的省略號。

我試圖用CSS屬性-webkit-hyphens：none，word-wrap：normal來修復它，正常，沒有任何工作......我缺少word-wrap：keep-all。目前版本的chrome 20.0.1132.57米無法識別。

Answer 1

您正在尋找文本溢出屬性。通過將text-overflow:ellipsis和white-space:nowrap應用到＃狀態欄，您將看到預期的效果。但是，您必須設置元素的寬度，以便瀏覽器知道何時/在何處附加省略號。 （請確保您刪除或更改width:1000%）

#status-bar { 
text-overflow: ellipsis; 
width: 100%; /* or whatever you prefer */ 
white-space: nowrap; 
}