不换行，显示省略号失效

.no-wrap {
  width:100%;
  word-break:keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


  

    
设备运行总时长
    

    
{{ time.totalTime }} 
  

  给元素添加上了no-wrap，但还是撑开了父元素。后来发现是父元素样式的问题：

.item {
  width: 50%;
  height: 50%;
  padding: 3px;
  float: left;
  display: table;
}

.content {
  width: 100%;
  padding: 5px;
  border: 2px solid white;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

  父元素分别设置成了table和table-cell。这导致了显示省略号失效。