flex项目内的CSS省略号

Question

我有一个基于flexbox的布局。两列，一列固定大小，第二列需要占用其余空间。在成长列中，我有一个字符串，希望将其剪切掉。

在Chrome中可以正常运行。但它在Firefox和IE中不起作用。我试图通过使用相对位置和绝对位置来给grow（flex
item）内部元素一个宽度来修复它，但是随后我得到了一个损坏的布局。损坏与元素的高度未考虑其所有子元素有关。

注意：flex grow项目内部的内部元素由几个 div 标签构建。

.cols {

  display: flex;

}



.flex--0 {

  flex: 0 0 auto;

}



.flex--1 {

  flex: 1 1 auto;

}



.absolute {

  position: absolute;

}



.relative {

  position: relative;

}



.width--100 {

  width: 100%;

}



.ellipsis {

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

}



.border {

  border: 1px solid gray;

}


<h1>Ellipsis inside Flex item</h1>



<h2>Working fine in Chrome Not working in FF and IE</h2>



<div class="cols border">

  <div class="flex--0 border padding--sm">Icon</div>

  <div class="flex--1 border padding--sm">

    <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>

    <div>Icon</div>

    <div>Icon</div>

    <div>Icon</div>

  </div>

</div>



<div>Second BLOCK</div>



<h2>Trying to fix in FF and IE (Layout corrupts)</h2>

<div class="cols border">

  <div class="flex--0 border padding--sm">Icon</div>

  <div class="flex--1 relative border padding--sm">

    <div class="absolute width--100">

      <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>

      <div>Icon</div>

      <div>Icon</div>

      <div>Icon</div>

    </div>

  </div>

</div>



<div>Second BLOCK</div>

Answer 1

您可以添加min-width: 0;到弹性项目。

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

或添加overflow: hidden;到它。

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

html" target="_blank">jsFiddle

为什么？

[4.5。弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新auto值作为CSS 2.1中定义的min-width和min- height属性的初始值 。

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

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