在 Flex 容器中的文本上设置省略号

Question

有什么方法可以让以下 HTML 行为：

1. 文本垂直居中对齐
2. 文本是单行，并用 ... 截断（省略号）

我可以得到 1 或 2，但不能两者都得到。

请注意，HTML 无法修改，它是由第三方库生成的。我们只能改变CSS。

.target {

  width: 300px;
  height: 50px;
  border: solid 1px red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex; /*change to block for ellipsis*/
  align-items: center;
  
}

<label class="target">
  Text here is very very long that it might get truncate if this box get resized too small
</label>

Answer 1

省略号需要在文本元素上设置，而不是在容器上：

.target {
  display: flex;
  align-items: center;
  width: 300px;
  height: 50px;
  border: solid 1px red;
  white-space: nowrap;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="target">
  <span>Text here is very very long that it might get truncate if this box get resized too small</span>
</label>

更多选项：将省略号应用于多行文本