垂直对齐不适用于弹性项目

Question

我试图在flex框元素中垂直集中纯文本.

我决定使用性能display:table-cell与vertical-align: middle.但它似乎在flexbox元素中无法正常工作.

如何在不使用包装器或定位的情况下垂直集中它,同时仍然用椭圆截断长文本？

.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: table-cell;
  vertical-align: middle;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>

查看CodePen

Answer 1

一种解决方案是将每个弹性项目定义为其自己的弹性容器,以便将其内容垂直居中align-items:center.要继续text-overflow工作,请为每个弹性项添加一个子元素,然后可以使用省略号将其截断.

我无法提供一个简洁的解释,为什么text-overflow不能使用display:flex,David Wesst也不能.用他的话说:

事实证明,确实没有一种干净的方法可以做到这一点.如果你想知道我是如何得出这个结论的,你可以停下来,因为我没有.那些负责规范的人做了,你可以阅读以Mozilla错误报告开头的完整对话,并引导整个邮件组讨论为什么它应该(或者,在这种情况下,不应该)作为规范的一部分实现.

这是一个有效的例子:

.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: cyan;
}

.item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}

<div class="container">
  <div class="item"><span>Hello, I'm very very long string! Hello, I'm very very long string!</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
  <div class="item"><span>Hello</span></div>
</div>

另请参阅:
从Flex容器设置文本省略号