html - HTML / CSS省略号（...）不工作

Question

我正在尝试在我的网站上使用省略号。这是以下 HTML / CSS 代码，它似乎不起作用。

CSS：

.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}

HTML：

<div class="oneline">Testing 123 Testing 456 Testing 789</div>

Answer 1

根据最初的帖子，我们都假设很明显，但以防万一......;）

<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>

http://jsfiddle.net/NawcT/

编辑：解决方案是设置段落与 div 的样式。

Answer 2

分配position:absolute给要截断的元素可能会产生较少的不良副作用float:left。

这对我有用：

div {
  position: absolute;
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}