代码伺候:
<!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