CSS文本溢出作为省略号未按预期工作

Question

我遇到text-overflow的简单问题。 我可以ellipsis我的文字，但文字不会完全填满div。

以下是jsfiddle中的演示：Fiddle

我认为这段代码可以解决这个问题，但我错了。

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

我已经看到了与CSS text ellipsis when using variable width divs，Can't get "text-overflow: ellipsis;" to work相关的各种主题，但它们都没有为我效用。

Answer 1

为元素添加宽度以使省略号起作用。 当内容超过容器的宽度时，它可以工作。如果没有指定容器的宽度，它将无法工作。

Answer 2

试试这个

Jsfiddle：http://jsfiddle.net/manublueheart/D4FKm/3/

诀窍是将-webkit-box-orient: vertical;添加到您的css

p.first{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;     /* fallback */
    max-height: 32px;      /* fallback */
}