一、问题描述：父级元素添加display: flex;，子元素超长，用max-width限制不起作用，如图
企业微信截图_1717574733931.png
二、需求是：“明细明细明细明细明细明细明细明细”超长显示“明细明细明细明...”
三、方案：给父元素添加样式：min-width: 0; 取消浏览器默认设置
<div class="con-info">
<image class="img" src="/img1.png"></image>
<div class="count">
<count-to :start-val="0" end-val="1" :duration="2600" />
<div class="description">哈哈哈哈哈哈哈哈哈哈哈哈</div>
</div>
</div>
.con-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.count {
flex: 1; // flex布局分配空间
min-width: 0; // 取消浏览器默认设置
display: flex;
align-items: center;
}
.description {
max-width: 190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title-image {
max-width: 30px;
height: 30px;
}
实现效果如下，标题字数超出，自动隐藏
企业微信截图_17175750715936.png
