Как заставить css генерировать многоточие при переполнении текста?

Question

Я работаю с этим jsfiddle. Я бы хотел, чтобы <p>Super long words here</p> выглядел как Super lon... вместо того, чтобы показывать полный текст. Я попытался добавить

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

Но это не сработало. Как я могу получить текст переполнения в многоточие?

Answer 1

Вы должны указать ширину для достижения этого эффекта, как это:

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

Fiddle