如何防止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; 
}