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

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:


ANSWERS:


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;
}



 MORE:


 ? Word wrap: ellipsis without css
 ? Cutoff multiple lines of text with text-overflow: ellipsis
 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?
 ? css - display: table-cell and fixed width
 ? text-overflow not working with HTML5
 ? Truncate text with ellipsis in CSS (nested divs, not HTML table)
 ? Using ellipsis inside table
 ? Epllisis not working in IE