flex:1与文本过长显示省略号

[renmm]

直接贴最终代码: 传送门

我们知道css实现文本过长，实现省略号：

.text {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.w100{ width: 100px;}

<div class="text w100">这段css要生效，前提是长度固定（例如width:100px），使用百分比都不行</div>

这段css要生效，前提是长度固定（例如width:100px），使用百分比都不行。

当使用flex布局时，固定长度+可变长度（适配不同移动端设备），这时需要注意几个css属性就可以实现

html结构需要调整：

<div class="filed">
  <div class="filed--label">萨达多撒多</div>
   <div class="filed-text">
      <div class="filed-text--wrapper">当使用flex布局时，固定长度+可变长度（适配不同移动端设备），这时需要注意几个css属性就可以实现</div>
   </div>
</div>

.filed { display: flex;}
.filed--label {width: 100px;}
.filed-text {
  flex:1;
  overflow: hidden;
}
.filed-text--wrapper {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
}