将 Flexbox 和文本省略号与中间容器一起使用

Question

我需要在 flexbox 中的 h2 文本中添加文本省略号。我在那里找到了很多很好的例子，但其中 none 适合我的情况，中间有中间 div：

<div class="parent-flex">
   <div class="inner-div-1">
      <div class="inner-div-2">
         <h1>My long text is here</h1>
      </div>
   </div>
   <div>... other column...</div>
</div>

而 css 是：

.parent-flex {
   display: flex;
}

h1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

尝试添加：

min-width: 0;
display: flex;
flex: auto; // tried also 0, 1, 0 1 and lot of other combinations

到链中的每个 DIV，但无法使其工作:(

如有任何帮助，我们将不胜感激！无法正常工作。

Answer 1

找到解决方案:)

无需向内部 div 添加任何 css

刚刚：

.parent-flex {
    flex: auto;
    flex-direction: column;
    padding: 0 20px;
    min-width: 0px;
}

h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

将 Flexbox 和文本省略号与中间容器一起使用

Using Flexbox and text ellipsis together with intermediate container

css

ellipsis

flexbox