在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 ，这样它就变成了一个弹性容器。

{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;最小宽度：0;显示：flex; / *修复IE * /} ul li：nth-​​child（2n + 1）{background：＃77aaff;} ul li a {/ * display：block;不需要* / overflow：hidden;文本溢出：省略号; < 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>

另外一个就是添加 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>  
 
 < 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>  $ p> 

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.

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>

解决方案

One solution to make IE behave is to add 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>

---

Another is to add 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>

这篇关于在Flex中折叠文本不指定宽度或弹性基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！