一、問題描述：父級元素添加display: flex;丢氢，子元素超長聊记，用max-width限制不起作用秸苗，如圖
企業(yè)微信截圖_1717574733931.png
二召娜、需求是：“明細(xì)明細(xì)明細(xì)明細(xì)明細(xì)明細(xì)明細(xì)明細(xì)”超長顯示“明細(xì)明細(xì)明細(xì)明...”
三、方案：給父元素添加樣式：min-width: 0; 取消瀏覽器默認(rèn)設(shè)置
<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; // 取消瀏覽器默認(rèn)設(shè)置
display: flex;
align-items: center;
}
.description {
max-width: 190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title-image {
max-width: 30px;
height: 30px;
}
實現(xiàn)效果如下惊楼，標(biāo)題字?jǐn)?shù)超出玖瘸，自動隱藏
企業(yè)微信截圖_17175750715936.png
