<div class="container">
<div class="div_1"></div>
<div class="div_2">
<span id="content" class="text">這個(gè)是商戶(hù)名稱(chēng)我覺(jué)得比較長(zhǎng)了應(yīng)該可以了</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;
}
整個(gè)容器采用flex布局秀鞭，里面兩個(gè)div分別占10和3的比例蓖租。但是出來(lái)的效果卻是這個(gè)樣子：
image.png
很明顯這個(gè)比例并不是10:3，而是完全顯示了文本長(zhǎng)度捉片。而且為文本元素設(shè)置寬度也不起作用蝙茶，如下所示：
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
width: 10px; // 這個(gè)寬度不會(huì)起作用
}
究其原因艺骂，在white-space:nowrap;的前提下，flex已經(jīng)失效了隆夯。在去掉這個(gè)屬性后钳恕，flex布局恢復(fù)正常：
image.png
但是這個(gè)偏離了我們的初衷，去掉了white-space:nowrap;之后吮廉，文本省略就無(wú)法實(shí)現(xiàn)了苞尝。
解決方案
根據(jù)元素的結(jié)構(gòu)不同，有兩種不同的解決方案：
1宦芦、如果文本父元素參與了flex布局（如上面的例子中的文檔結(jié)構(gòu)所示）
那么可以為文本父元素添加一個(gè)width宙址，例如：
.div_2 {
flex: 3;
width: 1px;
}
然后文本采用block顯示：
.text {
display: block; // 必須采用block，否則依然不會(huì)起作用
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">
這個(gè)是商戶(hù)名稱(chēng)我覺(jué)得比較長(zhǎng)了應(yīng)該可以了
</div>
</div>
那么就比較簡(jiǎn)單了恬涧，直接對(duì)文本元素設(shè)置ellipsis注益，如下圖所示：
.div_2 {
flex: 3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #cccccc;
}
image.png
通常情況下，文本一般是放在span溯捆、p丑搔、label等元素中，而設(shè)計(jì)布局的時(shí)候提揍，一般使用的是div元素啤月，因此方案一比較通用一點(diǎn)。
