text-overflow:ellipsis; not truncating overflowing text and giving ellipsis

Question

I am trying to force the paragraphs in a small div to all be one line, no wrap, and when they overflow over the div to be truncated with ellipsis.

I got the no wrap working with white-space:nowrap;, but the text is still overflowing over the div even though I have set text-overflow to be ellipsis.

What am I doing wrong?

It shouldn't be support, because, surprisingly, both of those css3 properties are widely supported.

Here is a js fiddle with the problem: http://jsfiddle.net/4C7CW/

Answer 1

text-overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box.

text-overflow comes into play only when:

• the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
• the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)

So...

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