关于前端页面设置省略号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;}}
}