Html 文本溢出省略号在嵌套flexbox中不起作用

我用FlexBox创建了一个两列布局

在右边的列中，我有两行，第一行包含标题，第二行包含页面内容

在标题中，我有三列，一个按钮，一些文本和一个按钮

我希望按钮位于列的左侧和右侧，文本占据任何额外的空间

最后，我希望文本具有

空白：nowrap

和

文本溢出：省略号

属性以截断长标题

我的问题是：我无法使文本包装在嵌套在另一个flexbox中的flexbox中正常工作，如下图所示：

.container{
显示器：flex；
高度：100vh；
}
.左{
宽度：200px；
背景颜色：黄色；
}
.对{
弹性：1；
背景颜色：蓝色；
颜色：白色；
}
.标题{
背景：红色；
颜色：白色；
显示器：flex；
弯曲方向：行；
}
.标题.内容{
空白：nowrap；
flex:01自动；
文本溢出：省略号；
溢出：隐藏；
最小宽度：0；
}
.标题.按钮{
背景：绿色；
弹性：10自动；
}
.header.content:悬停{
空白：正常；
}

剩余内容
按钮
此内容非常长，应该用省略号包装，但由于某些原因，当它嵌套在带有display:flex的容器中时，它不起作用
按钮
内容权

以下各项的值：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

只有当元素的内容超过其宽度时，才会工作

您可以设置

.header.content

的宽度：

.header .content {
    width: 50%;
}

它将按照您的预期工作：

---

代码中有两个问题阻止省略号工作：

div.right

包含

div.header

，它依次包含按钮和文本

div.right

是主容器（

.container

）中的弹性项

默认情况下。弹性项目的初始设置为

minwidth:auto

这意味着，未包装的文本长度将为父flex项设置最小大小。一种使flex项收缩到超出其内容的方式是将flex项设置为

minwidth:0

您已经为

.content

flex项完成了此操作，但也需要在

.right

项上设置它

您已将

.content

元素设置为

flex:01 auto

这告诉flex项使用内容的大小（

FlexBasis:auto

）。文本设置大小

相反，将宽度设置为0，并根据需要让flex容器分配空间

.container{
显示器：flex；
高度：100vh；
}
.左{
宽度：200px；
背景颜色：黄色；
}
.对{
弹性：1；
背景颜色：蓝色；
颜色：白色；
最小宽度：0；/*新*/
}
.标题{
背景：红色；
颜色：白色；
显示器：flex；
弯曲方向：行；
}
.标题.内容{
空白：nowrap；
弹性：1；/*调整*/
文本溢出：省略号；
溢出：隐藏；
最小宽度：0；
}
.标题.按钮{
背景：绿色；
弹性：10自动；
}
.header.content:悬停{
空白：正常；
}

剩余内容
按钮
此内容非常长，应该用省略号包装，但由于某些原因，当它嵌套在带有display:flex的容器中时，它不起作用
按钮
内容权

我希望这个解决方案能帮助其他人，因为我的页面是flexbox的一个巨大嵌套组合，所以我发现没有任何其他解决方案是有效的。所以最小宽度0不起作用，除了这个，我什么都没试过

在包含要包装的副本的flex列中，需要执行此操作

.row{
显示器：flex；
}
.col1{
位置：相对位置；
弹性：170%；
溢出：隐藏；
}
.嵌套{
宽度：100%；
位置：绝对位置；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.col2{
弹性：130%；
左：1rem；
}

这是我真正的长拷贝，它会把它推出屏幕，无论我做什么都不会尊重Elipse！！！
最后文本

谢谢，但这会使页眉容器超出页面宽度，导致水平滚动。您的问题中的两个JSFIDEL非常不同（悬停/左菜单/etc）。你能解释一下你到底在找什么吗？你的问题不太清楚。如果父对象的大小是由CSS计算的，则可能还需要将其设置为

minwidth:0px

。