Html flex项中的CSS省略号

我有一个基于flexbox的布局。两列，一个固定大小，另一个需要占用剩余空间。在grow列中，我有一个字符串，我希望它被剪裁

在铬合金中工作良好。但它在Firefox和IE中不起作用。我试图通过使用相对和绝对位置为grow（flex item）内部元素指定一个宽度来修复它，但后来我得到了一个损坏的布局。损坏与元素的高度不考虑其所有子元素有关

注意：flex grow项中的内部元素由几个div标记构建

这是你的电话号码

.cols{
显示器：flex；
}
.flex--0{
flex:0自动；
}
.flex--1{
flex:1自动；
}
.绝对的{
位置：绝对位置；
}
.亲戚{
位置：相对位置；
}
.宽度--100{
宽度：100%；
}
.省略号{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
.边界{
边框：1px纯色灰色；
}

Flex项目中的省略号 在铬合金中工作良好，在FF和IE中不工作 偶像 图标LKDJASDOF dlkjasdfo；isd fasldf；asofj-as；doifja dflkas d；laiksjdf oaisjdf asldkfj a；slkfdj-as；oifj as；ldkfj asldkfjowiejfa；wlkdfj as；lkdjf as；lkdfj a；奥西夫杰；lkefj asldkfj；aolifj aw；oiefjasl；dkfj a；slkdfj aodfj aw；lfjk-as；lkdfj a；oiwefjr 偶像 偶像 偶像 第二街区 试图修复FF和IE（布局损坏） 偶像 图标LKDJASDOF dlkjasdfo；isd fasldf；asofj-as；doifja dflkas d；laiksjdf oaisjdf asldkfj a；slkfdj-as；oifj as；ldkfj asldkfjowiejfa；wlkdfj as；lkdjf as；lkdfj a；奥西夫杰；lkefj asldkfj；aolifj aw；oiefjasl；dkfj a；slkdfj aodfj aw；lfjk-as；lkdfj a；oiwefjr 偶像 偶像 偶像

---

第二块您可以添加

最小宽度：0到弹性项

.flex--1 {
  flex: 1 1 auto;
  min-width: 0;
}


或添加
溢出：隐藏到它

.flex--1 {
  flex: 1 1 auto;
  overflow: hidden; /*or auto*/
}



为什么？


为了为flex项目提供更合理的默认最小尺寸，此
规范引入了一个新的
auto
值作为
CSS 2.1中定义的
最小宽度
和
最小高度
属性


或者，您可以将内容包装到容器中

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

谢谢。它确实在IE和FF中工作。你能解释一下为什么它需要这种变通方法吗？我本来希望能在第一时间工作……在升级到Chrome48时遇到了这个问题。这个变通方法似乎已经解决了这个问题。非常感谢。