Question

我想在状态栏中显示网址。我希望状态栏只有一行句柄溢出文本溢出：省略号。

长网址总是这样打破：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，没有什么能正常工作......我缺少自动换行：keep-all。在当前版本的chrome 20.0.1132.57 m中无法识别。

Answer 1

您正在寻找文本溢出属性。通过将text-overflow:ellipsis和white-space:nowrap应用于＃status-bar，您将看到所需的效果。但是，您必须设置元素的宽度以便切断，以便浏览器知道何时/何处附加省略号。（确保删除或更改width:1000%）

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

如何防止webkit破坏长文本

1 个答案: