代碼伺候：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.outer{
display: flex;
}
.test{
flex: 1;
min-width: 0;
}
.inner{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="outer">
<div class="test">
<div class="inner">
fkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklh
</div>
</div>
</div>
</body>
</html>
嘗試刪除min-width，發現省略號不顯示
原因：test被子元素inner無限撐開
其他的解決方法： 用width: 0;或者overflow:hidden;代替min-width;
參考博客：https://www.cnblogs.com/BlackStorm/p/6793170.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex