从Flex容器

Question

有没有办法让以下HTML表现得如此：

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

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

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

＆＃13;
＆＃13;
.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;
  
}
＆＃13;
<label class="target">
  Text here is very very long that it might get truncate if this box get resized too small
</label>
＆＃13;
＆＃13;
＆＃13;

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>

更多选项：Applying an ellipsis to multiline text