如何让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