我想在状态栏中显示 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>
我正在使用 width:1000% 来克服这个问题,但我不会看到...像这样的省略号。
我试图用 CSS 属性修复它 -webkit-hyphens:none, word-wrap:normal, 什么都行不通...我缺少 word-wrap: keep-all。这在当前版本的 chrome 20.0.1132.57 m 中无法识别。
最佳答案
您正在寻找 text-overflow 属性。通过将 text-overflow:ellipsis
和 white-space:nowrap
应用于#status-bar,您将看到所需的效果。但是,您必须为要截断的元素设置宽度,以便浏览器知道何时/何处附加省略号。 (确保删除或更改 width:1000%
)
#status-bar {
text-overflow: ellipsis;
width: 100%; /* or whatever you prefer */
white-space: nowrap;
}
关于css - 如何防止webkit打断长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11620226/