<div class="container">
<div class="div_1"></div>
<div class="div_2">
<span id="content" class="text">这个是商户名称我觉得比较长了应该可以了</span>
</div>
</div>
.container {
display: flex;
width: 500px;
border: 1px solid;
}
.div_1 {
flex: 10;
background-color: red;
}
.div_2 {
flex: 3;
}
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
}
整个容器采用flex布局，里面两个div分别占10和3的比例。但是出来的效果却是这个样子：
image.png
很明显这个比例并不是10:3，而是完全显示了文本长度。而且为文本元素设置宽度也不起作用，如下所示：
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
width: 10px; // 这个宽度不会起作用
}
究其原因，在white-space:nowrap;的前提下，flex已经失效了。在去掉这个属性后，flex布局恢复正常：
image.png
但是这个偏离了我们的初衷，去掉了white-space:nowrap;之后，文本省略就无法实现了。
解决方案
根据元素的结构不同，有两种不同的解决方案：
1、如果文本父元素参与了flex布局（如上面的例子中的文档结构所示）
那么可以为文本父元素添加一个width，例如：
.div_2 {
flex: 3;
width: 1px;
}
然后文本采用block显示：
.text {
display: block; // 必须采用block，否则依然不会起作用
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
}
效果如下：
image.png
2、如果文本元素参与了flex布局。
例如下面的例子，文本所在元素div_2直接参与了flex布局：
<div class="container">
<div class="div_1"></div>
<div class="div_2">
这个是商户名称我觉得比较长了应该可以了
</div>
</div>
那么就比较简单了，直接对文本元素设置ellipsis，如下图所示：
.div_2 {
flex: 3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
}
image.png
通常情况下，文本一般是放在span、p、label等元素中，而设计布局的时候，一般使用的是div元素，因此方案一比较通用一点。
