css - 文本溢出 :ellipsis; not truncating overflowing text and giving ellipsis

Question

我试图强制将一个小 div 中的段落全部排成一行，不换行，并且当它们溢出 div 时用省略号截断。

我使用 white-space:nowrap; 时没有换行，但即使我已将 text-overflow 设置为省略号，文本仍然溢出 div。

我做错了什么？

它不应该被支持，因为令人惊讶的是，这两个 css3 属性都被广泛支持。

这是一个解决问题的 js:http://jsfiddle.net/4C7CW/

Answer 1

文本溢出

text-overflow 声明允许您处理裁剪文本:即不适合其框的文本。

text-overflow 仅在以下情况下发挥作用:

• 盒子有溢出而不是可见的(溢出:可见文本只是从盒子里流出)
• 盒子有 white-space: nowrap 或类似的限制文本布局方式的方法。 (如果没有这个，文本将换行到下一行)

所以...

#card
{
    width:200px;
    background:red;
    color:#000000;
    font-size:16px;
}

#card p
{
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

http://jsfiddle.net/4C7CW/3/