CSS 使用 flex-direction 列截断 Flexbox 父级中的文本

Question

如何截断下面的文本？最小宽度：0；当 flex-direction 设置为 column 时，hack 不起作用。这个答案也没有。

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

Answer 1

当您给出align-items: center溢出时text，parent宽度不受限制，因此省略号不会出现。

如果您删除align-items: center它，它会起作用，因为align-items: stretch这是默认设置 - 但图像现在会被拉伸：

.parent {
  border: 1px solid red;
  display: flex;
  /*align-items: center;*/
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

解决方案

添加width: 100%到text- 请参阅下面的演示：

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

最小宽度：0；当 flex-direction 设置为 column 时，hack 不起作用。

请注意，min-width: 0如果要覆盖弹性项目宽度，因为它在行方向上是自动的（对于您使用的列min-height方向）。min-height: 0请参阅下面在列 flexbox中使用的示例：

• Flexbox 调整大小和可滚动溢出