css - 文本溢出：省略号；不截断溢出的文本并给出省略号

Question

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

我得到了 no wrap white-space:nowrap;，但即使我已将 text-overflow 设置为省略号，文本仍会溢出 div 。

我究竟做错了什么？

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

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

Answer 1

文本溢出

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/