折叠 Flex 中的文本，而不指定宽度或弹性基础

Question

我需要有一个水平菜单，该菜单将折叠带有省略号的文本，但不会扩展到全宽。我已经让它正常工作，除了IE。如果我设置宽度或弹性基础，它将起作用，但不再根据内容大小进行设置。有没有人对解决方法有任何提示？我已经在谷歌上搜索了修复程序，但到目前为止我尝试过的任何方法都没有成功。

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>