text overflow ellipsis doesn't work in my case

Problem

As you can see in my demo, I want to do '...' if the users' name is too long. But even if I set a fixed width to the <p>, it won't work.

.userDetailWrap p{
    float:left;
    margin:0px;
    clear:both;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

demo http://plnkr.co/edit/0h05w6fyhBHPr1NvXTSC?p=preview

Problem courtesy of: user3522444

Solution

Setting fixed width to the p works fine. You should also consider cross browser practices.

width:80px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;

Check this out.

Solution courtesy of: nej

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.