div固定宽度后，超出部分自动显示省略号.... pk 第一行正常显示，第二行超出显示省略号

第一行超出显示省略号：

css:

.box{
  width:50px;
  text-align: center;
  font-size:12px;
  color: #444444;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

}

效果图：

第一行正常显示，第二行超出显示省略号：

css:

.box{

    overflow:hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

}

效果图：