在Flex中折叠文本不指定宽度或弹性基础 [英] Collapse Text in Flex Without specifying width or flex-basis
问题描述
我需要一个水平的菜单,它会用省略号折叠文本,但不会扩展为全角。我已经得到它工作正常,除了IE浏览器。如果我设置宽度或弹性基础,它将工作,但它不是基于内容大小设置了。有没有人有任何提示解决方法?我一直在寻找解决办法,但是我迄今为止所做的一切都是成功的。
html,body {font-family:verdana,sans-serif;} div {position:relative;宽度:450px;背景:#0088ff; margin-bottom:20px;} div h2 {color:#fff;保证金:0;填充:10px; line-height:1em;} ul {display:flex;填充:10px 0;保证金:0; list-style:none;} ul li {margin:0; padding:10px 30px;背景:#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;溢出:隐藏;文本溢出:省略号; < div> < h2>应该崩溃< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li> < li>< li style ='flex-shrink:13>>< a>测试更长的短语< / a>< / li>< div>< < h2>不应展开< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li>< / ul>< / div>
解决方案
解决方案一个解决方案使IE的行为是添加 display:flex
到 li
,这样它就变成了一个弹性容器。
< div> < h2>应该崩溃< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li> < li>< li style ='flex-shrink:13>>< a>测试更长的短语< / a>< / li>< div>< < h2>不应展开< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li>< / ul>< / div>
另外一个就是添加 < h2>应该崩溃< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li> < li>< li style ='flex-shrink:13>>< a>测试更长的短语< / a>< / li>< div>< < h2>不应展开< / h2>< ul> < li style ='flex-shrink:1'>< a>测试< / a>< / li> < li style ='flex-shrink:11'>< a>测试中< / a>< / li>< / ul>< / div> I need to have a horizontal menu that will collapse text with ellipsis, but doesn't expand to full width. I've gotten it to work fine, except for IE. If I set width or flex-basis, it will work, but then it's not set based on content size anymore. Does anyone have any tips on a workaround? I've googled around for a fix, but nothing I've tried so far has been successful.
One solution to make IE behave is to add
Another is to add
这篇关于在Flex中折叠文本不指定宽度或弹性基础的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! overflow:hidden 到
li
。
html,body {font-family:verdana,sans-serif;} div {position:relative;宽度:450px;背景:#0088ff; margin-bottom:20px;} div h2 {color:#fff;保证金:0;填充:10px; line-height:1em;} ul {display:flex;填充:10px 0;保证金:0; list-style:none;} ul li {margin:0; padding:10px 30px;背景:#bbccff; / *不需要,因为它是默认的flex-grow:0; flex-shrink:1; flex-basis:auto; * / text-align:center; / * min-width:0;溢出时不需要:hidden使用* / overflow:hidden; / *修复IE * /} ul li:nth-child(2n + 1){background:#77aaff;} ul li a {display:block;溢出:隐藏;文本溢出:省略号;
< div>
$ p> 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>
display: flex
to the li
so it becomes a flex container.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
to the 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>