文本溢出:省略号; 不截断溢出的文本并给出省略号

Question

我试图强制一个小div中的段落都是一行,没有换行,当它们溢出div时用省略号截断.

我得到了无包装white-space:nowrap;,但文本仍然溢出div,即使我已将文本溢出设置为省略号.

我究竟做错了什么？

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

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

Answer 1

文本溢出

文本溢出声明允许您处理剪切的文本:即,不适合其框的文本.

文本溢出仅在以下情况下发挥作用:

• 盒子有溢出而不是可见(溢出:可见文本只是流出盒子)
• 该框具有空格: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/