HTML / CSS 省略号 (...) 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10762424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML / CSS Ellipsis (...) Not Working
提问by Storm3y
I'm attempting to get ellipsis working on my site. This is the following HTML / CSS code and it doesn't appear to be working.
我试图让省略号在我的网站上工作。这是以下 HTML/CSS 代码，它似乎不起作用。
CSS:
CSS：
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
HTML：
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
回答by AlienWebguy
Based on the initial post, we're all assuming the obvious, but just in case ... ;)
根据最初的帖子，我们都假设显而易见，但以防万一......;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
EDIT: Solution was to style the paragraph vs the div.
编辑：解决方案是设置段落与 div 的样式。
回答by Oliver Schafeld
Assigning position:absoluteto the element to be truncated will probably have less undesired side-effects that float:left.
分配position:absolute给要截断的元素可能会减少float:left.
This worked for me:
这对我有用：
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
