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:



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)



#card p


 ? 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