在Flex中折疊文本而不指定width或flex-basis

Question

我需要一個水平菜單，將使用省略號折疊文本，但不會擴展到全寬。 我已經讓它工作正常，除了IE。 如果我設置寬度或彈性基礎，它將工作，但然后它不再基於內容大小設置。 有沒有人對解決方法有任何提示？ 我已經google了一下來修復，但到目前為止我沒有嘗試過任何事情。

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; flex-grow: 0; flex-shrink: 1; flex-basis: auto; text-align: center; min-width: 0; } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div> 

Answer 1

使IE行為的一個解決方案是將display: flex添加到li ，使其成為flex容器。

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; /* not needed as it is their default flex-grow: 0; flex-shrink: 1; flex-basis: auto; */ text-align: center; min-width: 0; display: flex; /* fix for IE */ } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { /* display: block; not needed */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div> 

---

另一個是添加overflow: hidden到li 。

 html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom: 20px; } div h2 { color: #fff; margin: 0; padding: 10px; line-height: 1em; } ul { display: flex; padding: 10px 0; margin: 0; list-style: none; } ul li { margin: 0; padding: 10px 30px; background: #bbccff; /* not needed as it is their default flex-grow: 0; flex-shrink: 1; flex-basis: auto; */ text-align: center; /* min-width: 0; not needed when overflow:hidden is used */ overflow: hidden; /* fix for IE */ } ul li:nth-child(2n+1) { background: #77aaff; } ul li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

 <div> <h2>Should collapse</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li> </ul> </div> <div> <h2>Should not expand</h2> <ul> <li style='flex-shrink:1'><a>Test</a></li> <li style='flex-shrink:11'><a>Test Medium</a></li> </ul> </div>