关于前端页面设置省略号ellipsis和flex同时使用会无效的问题

问题：当内容超过宽度时，使用省略号...代替溢出的内容，并内容居中显示

使用css的text-overflow: ellipsis属性，可设置省略号，需要注意的是： 如果设置了display: flex，则换行无效。. 一定要设置宽度

方式一：不确定宽度居中，父级使用display: flex，那么子级.text设置了flex: 1就是设置了一个宽度，换行有效。

<div class="name">
  <div class="label">姓名</div>
  <div class="text">文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
 
// css部分
.name {
  display: flex;
   justify-content: center;
   align-items: center;
  .label {
    width: 140px;
  }
  .text {
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; 
  }
}

方式二：若确定了宽度，则设置父级.text的宽度，如：width: calc(100% - 140px); 

// html部分
<div class="name">
  <div class="label">姓名</view>
  <div class="text"><div class="text1">文本文本文本文本文本文本文本文本文本文本</div></div>
</div>
 
// css部分
.name {
  display: flex;
   justify-content: center;
   align-items: center;
  .label {
    width: 140px;
  }
  .text {
   width: calc(100% - 140px);
    .text1 {     
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
  }
}