flex项目内的CSS省略号

Question

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

在 Chrome 中它工作正常。但它在 Firefox 和 IE 中不起作用。我试图通过使用相对和绝对位置为增长（弹性项目）内部元素提供宽度来修复它，但后来我得到了一个损坏的布局。损坏与元素的高度没有考虑到它的所有子元素有关。

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

这里是jsFiddle。

.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;
}

jsFiddle

或者添加overflow: hidden;。

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

jsFiddle

---

为什么？

4.5. Implied Minimum Size of Flex Items

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

---

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

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

jsFiddle