How can I make css generate an ellipsis on text overflow?

Question

I'm working with this jsfiddle. I would like the <p>Super long words here</p> to look like Super lon... instead of showing the full text. I tried adding

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

But it didn't work. How can I get my overflow text to end in an ellipsis?

Answer 1

You have to specify a width to achieve this effect, like this:

.pClass p {
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:20px;
}

Fiddle