flex踩坑系列-css省略不生效

人生没有彩排每次都是实战，代码亦如此。

代码

 <li class="new-list-item cp pl12 pr12" :key="i">
     <div class="message vc">
          {{news.content}}
      </div>
  </li>
  
   .new-list-item{
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .message{ // 没生效
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

• 描述 - 类名message的父亲级为flex，给类名message添加省略css
• 结果 - 没效果

解决方案

• 添加一个盒子脱离flex影响

代码

 <li class="new-list-item cp pl12 pr12" :key="i">
     <div class="message vc">
         <div class="toel"> {{news.content}}</div>
      </div>
  </li>
  
.toel{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}