When the flex layout exceeds one line, the ellipses display fails (the solution takes up the entire line)

Realization effect:

As shown in Figure 2

Error report:

As shown in Figure 1, the title does not display the ellipsis and occupies its own line.

problem causes:

Because the entire layout liis occupied by the right side , there is no fixed width set. When setting no line wrapping, the width obtained is the width of the entire li, so you need to set theflexdetailflex：1titledetaiwidth:0

Code structure

Solution: widthSet the parent element to0

  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;
      	}  
      }
    }
  }