嵌套的flex-shrink在嵌套div上不起作用

Question

在flex场景中让嵌套的div收缩时遇到了一些麻烦。

这是Material-UI chips的简化，其思想是当一行已满时缩小文本的芯片。

简化的div结构如下所示(我们希望缩小内部跨度)：

<div class="papa">
  <div class="child child1">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
  <div class="child child2">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
  <div class="child child3">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
</div>

当没有可用的空间时，如何使内跨度收缩？

代码示例：

https://codepen.io/iccube/pen/abBgayz

Answer 1

只要给带有.child类的div省略号就行了(如下所示)：

后来编辑：我编辑了代码。我用一个div替换了span。(您可以将div替换回跨度，并将display: block添加到.span类中。但我认为这更干净。)基本上，您必须确保文本容器具有所需的宽度，而且由于您无法提供固定的宽度值，因此要截断的文本应该具有display: block

​

.papa {
  display: flex;
  flex-direction: row
  background-color: red
    oveflow: hidden;
}

.child {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}
.span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background-color: lightblue;
}
.child2 {
  background-color: lightgreen;
}
.child3 {
  background-color: lightcoral;
}

<div class="papa">
  <div class="child child1">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</div>-End</div>
  <div class="child child2">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</div>-End</div>
  <div class="child child3">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
</div>

​

您可以阅读有关溢出省略号here的更多信息

Answer 2

您需要指定".child“元素的宽度，以便flex知道如何处理它们。解决方案非常简单，下面是您需要更改的代码：

.child {
  flex-shrink: 1;
  white-space: nowrap;
  display: flex;
  width: 33.33%;
}

还有一件事，如果你需要".papa“元素有一些最大宽度，你可以像这样设置最大宽度：

.papa {
  display: flex;
  flex-direction: row;
  background-color: red;
  //SET YOUR MAX WIDTH
  max-width: 500px;
}

编辑:如果我没理解错的话，你想要这样的行为：https://codepen.io/ssaakkaa/pen/mdOZaJO

为此，您需要对子元素设置overflow:hidden