html - CSS 截断带有 flex-direction 列的 flexbox 父级中的文本

Question

如何截断下面的文本？最小宽度:0；当 flex-direction 设置为 column 时，hack 不起作用。这也不是answer .

.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是默认值 - 但图像现在被拉伸(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>

The min-width: 0; hack doesn't work when flex-direction is set to column.

请注意，在 min-width: 0如果用于覆盖 flex 元素宽度，因为它在行方向上是自动的(对于列方向，您使用 min-height )。 min-height: 0 见下面的例子在列 flexbox 中使用:

Flexbox resize and scrollable overflow