Html 嵌套的flex shrink不适用于嵌套的div

在flex场景中使嵌套div收缩时遇到一些困难

这是一个简化，其思想是芯片缩小他们的文本时，一行是满的

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

修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束

当没有可用空间时，如何使内部跨度缩小

代码示例：

---

只需给div加上class

。child

省略号道具（如下所示）：

稍后编辑：我编辑了代码。我用一个div替换了span（您可以将div替换回span，并将

display:block

添加到

.span

类中。但我认为这更干净。）基本上，您必须确保文本容器具有所需的宽度，并且由于无法为宽度提供固定值，要截断的文本应具有

display:block

。爸爸{
显示器：flex；
弯曲方向：行
背景颜色：红色
流动：隐藏；
}
.孩子{
显示器：flex；
空白：nowrap；
溢出：隐藏；
}
.span{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.儿童1{
背景颜色：浅蓝色；
}
.儿童2{
背景颜色：浅绿色；
}
.儿童3{
背景颜色：浅珊瑚；
}

修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束

只要给div加上class

.child

省略号（如下所示）：

稍后编辑：我编辑了代码。我用一个div替换了span（您可以将div替换回span，并将

display:block

添加到

.span

类中。但我认为这更干净。）基本上，您必须确保文本容器具有所需的宽度，并且由于无法为宽度提供固定值，要截断的文本应具有

display:block

。爸爸{
显示器：flex；
弯曲方向：行
背景颜色：红色
流动：隐藏；
}
.孩子{
显示器：flex；
空白：nowrap；
溢出：隐藏；
}
.span{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.儿童1{
背景颜色：浅蓝色；
}
.儿童2{
背景颜色：浅绿色；
}
.儿童3{
背景颜色：浅珊瑚；
}

修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束
修正了这是一个很长的文本，我们想用省略号结束

您需要指定“.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;
}

编辑： 如果我理解正确，您希望这种行为：

---

为此，您需要在子元素上设置overflow:hidden，您需要指定“.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;
}

编辑： 如果我理解正确，您希望这种行为：

---

为此，需要在子元素上设置overflow:hidden

谢谢，这是一个技巧；-）。但是，我忘了在结束后添加另一个元素（我已经更新了问题）。我只想让内部跨度缩小……比你能接受萨卡卡的回答并添加

display:flex；宽度：33%到
.child
班，你应该很好：我希望它能工作，请看我的评论：-（请检查答案中的更新代码。如果我理解正确，这应该可以。像魅力一样工作，谢谢：-）谢谢，那是个小把戏；-）。但是，我忘了在结束后添加另一个元素（我已经更新了问题）。我只想让内部跨度缩小……比你能接受萨卡卡的回答并添加
display:flex；宽度：33%到
.child
类，你应该是好的：我希望它能工作，请看我的评论：-（请检查答案中的更新代码。如果我理解正确，这应该可以。像charm一样工作，谢谢：-）它是芯片，所以它们应该向左对齐并增长，直到占据整个宽度。而不是退缩。33%将把母公司分成3等份，一行->。。。子项需要溢出：隐藏属性：）它是碎片，因此它们应该向左对齐并增长，直到占据整个宽度。而不是退缩。33%将把母公司分成3等份，一行->。。。子项需要溢出：隐藏属性：）