flex布局超出一行显示省略号失效(占满整行解决方法）

实现效果：

如图二

报错问题：

如图一，标题并没有显示省略号，并且还独占一行

问题原因：

因为整个li是flex布局，detail为右侧占flex：1，并没有设置固定的宽度，当title设置不换行时，拿到的宽度时整个li的宽度，所以需要把detai设置width:0

代码结构

解决方法：给父元素的width设为0

  li {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    .cover {
      width: 81px;
      margin: 0 10px 0 14px;
    }
    .detail {
      flex: 1;
      width: 0;//！！！！！！！这块需要设为0
      height: 50px;
      margin-right: 10px;
      color: #ffffff;
      font-size: 12px;
      line-height: 20px;
      .title {
        width: 100%;
        height: 20px;
        color: #d3d3d3;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      	}  
      }
    }
  }